/**
 * AUTO-GENERATED — do not edit directly.
 * Edit styles-src/*.css and run: pnpm build:styles-mobile
 */

/* ========== 手机端适配（≤900px） ========== */
.mobile-sheet-close,
.mobile-sheet-title-row,
.mobile-sheet-back {
    display: none;
}

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    /* 虚拟键盘盖住的底部高度：输入时由 JS 写成 visualViewport 差值，关闭后回到 0 */
    --keyboard-inset: 0px;
    /* 输入框 computed font-size 须 ≥16px，避免聚焦时自动放大页面 */
    --mobile-search-input-font-size: 16px;
}

@media (max-width: 900px) {
    /*
     * 输入法弹出：把 body 钉在视口上，禁止 Safari 为了露出输入框把整页往上推。
     * 关掉输入框后 JS 会去掉这个锁，并把滚动 / visualViewport.offsetTop 还原。
     */
    html[data-ime-lock] body {
        position: fixed !important;
        left: 0;
        right: 0;
        width: 100%;
        top: var(--ime-lock-top, 0px);
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    :root {
        --mobile-sidebar-peek: 56px;
        --mobile-sidebar-shift: calc(100vw - var(--mobile-sidebar-peek));
        --mobile-sidebar-slide-ms: 320ms;
        --user-menu-surface-card-bg: #fff;
        --mobile-sheet-surface-bg: #fff;
        --mobile-sheet-group-bg: var(--user-menu-surface-card-bg, #fff);
        --mobile-sheet-segment-bg: var(--user-menu-surface-card-bg, #fff);
        --mobile-sheet-top-gap: 1px;
        --mobile-home-hero-height-extra: 0px;
        --mobile-sheet-panel-h: calc(100dvh - var(--topbar-h) - var(--mobile-sheet-top-gap) + var(--mobile-home-hero-height-extra) - var(--keyboard-inset, 0px));
        --mobile-sheet-panel-top: calc(var(--topbar-h) + var(--mobile-sheet-top-gap));
        --mobile-sheet-card-shadow: none;
        --mobile-sheet-top-radius: 16px;
        --mobile-sheet-dismiss-zone-h: 56px;
        --mobile-sheet-scrim-bg: rgba(0, 0, 0, 0.42);
        --filter-tabs-tab-active-shadow: none;
    }

    html[data-theme="dark"] {
        --user-menu-surface-card-bg: #202020;
        --mobile-sheet-surface-bg: #121212;
        --filter-tabs-tab-active-shadow: none;
    }

    /*
     * —— 移动端防缩放：全局层 ——
     *
     * text-size-adjust: 100%
     *   阻止「字体膨胀」：部分移动浏览器（尤其横竖屏切换后）会自行放大正文字号，
     *   字号一变，换行和元素宽度跟着变，观感就是「页面变宽了」。
     *
     * touch-action: manipulation
     *   去掉「双击放大」（double-tap zoom）以及点击的 300ms 延迟。
     *   注意它与 viewport 的 user-scalable=no 不同 —— 这个在 iOS 上是真的生效的，
     *   所以双击放大能拦住；但双指捏合放大（pinch-zoom）在 iOS Safari 上
     *   系统层面不允许被网页禁止，拦不住。
     */
    html,
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        touch-action: manipulation;
        /* 避免整页横向「橡皮筋」拖动，减少误判为页面变宽 */
        overscroll-behavior-x: none;
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"] {
            --user-menu-surface-card-bg: #202020;
            --mobile-sheet-surface-bg: #121212;
            --filter-tabs-tab-active-shadow: none;
        }
    }

    @media (prefers-color-scheme: light) {
        html[data-theme="system"] {
            --user-menu-surface-card-bg: #fff;
            --mobile-sheet-surface-bg: #fff;
        }
    }

    .sidebar-bubble-tip {
        display: none !important;
    }

    /* 移动端：未登录时隐藏「新建」和「搜索模板」按钮 */
    body:has(#login-btn:not([hidden])) #ai-create-new,
    body:has(#login-btn:not([hidden])) #search-icon-btn {
        display: none !important;
    }
}

.app-layout {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

.topbar {
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
    padding-top: var(--safe-top);
    height: calc(var(--topbar-h) + var(--safe-top));
}

html:not([data-workflow-active]) .app-sidebar {
    padding-top: max(10px, var(--safe-top));
    padding-bottom: max(12px, var(--safe-bottom));
}

#panel-home .hero {
    padding-bottom: max(12px, calc(12px + var(--safe-bottom)));
}

#panel-home:has(.hero-results:not([hidden])) .hero {
    padding-bottom: max(12px, calc(clamp(12px, 2vw, 20px) + var(--safe-bottom)));
}

/* 展开侧边栏：抽屉 + 遮罩（遮罩只在主内容区，避免盖住侧边栏） */
@media (max-width: 900px) {
    /* 展开：固定抽屉，实色背景，层级高于主内容遮罩 */
    html:not([data-workflow-active]) .app-sidebar:not(.is-collapsed) {
        --sidebar-pad-top: max(10px, var(--safe-top));
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 40;
        width: var(--mobile-sidebar-shift);
        max-width: none;
        min-width: 0;
        flex: 0 0 0;
        flex-basis: 0;
        margin: 0;
        padding: var(--sidebar-pad-top) 0 max(12px, var(--safe-bottom));
        box-sizing: border-box;
        background: var(--topbar-bg, var(--bg-base));
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        pointer-events: auto;
        align-items: stretch;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        transition: none;
        border-right: none;
    }

    html:not([data-workflow-active]) .app-sidebar:not(.is-collapsed) .app-sidebar-head {
        position: static;
        width: 100%;
        height: var(--topbar-chrome-h);
        min-height: var(--topbar-chrome-h);
        min-width: 0;
        margin: 0;
        padding: 0 12px;
        justify-content: space-between;
        align-items: center;
    }

    html:not([data-workflow-active]) .app-sidebar:not(.is-collapsed) .app-sidebar-logo {
        position: static;
        inset: auto;
        width: auto;
        height: auto;
        opacity: 1;
    }

    html:not([data-workflow-active]) .app-sidebar:not(.is-collapsed) .app-sidebar-collapse-btn {
        display: none !important;
    }

    .app-main-shell {
        transition: transform var(--mobile-sidebar-slide-ms, 320ms) cubic-bezier(0.32, 0.72, 0, 1);
        transform: translate3d(0, 0, 0);
    }

    html[data-app-sidebar-drawer-open],
    html[data-app-sidebar-drawer-open] body {
        overflow: hidden;
    }

    html[data-app-sidebar-drawer-open] .app-sidebar {
        box-shadow: none !important;
        filter: none;
        border-right: none;
    }

    html[data-app-sidebar-drawer-open] .app-main-shell {
        position: relative;
        z-index: 120;
        transform: translate3d(var(--mobile-sidebar-shift), 0, 0);
        border-radius: 18px 0 0 18px;
        box-shadow: none;
        overflow: hidden;
    }

    html[data-app-sidebar-drawer-open] .app-main-shell::before {
        content: "";
        display: block !important;
        position: absolute;
        inset: 0;
        z-index: 400;
        background: rgba(0, 0, 0, 0.42);
        opacity: var(--sidebar-dim, 1);
        pointer-events: auto;
        border-radius: inherit;
    }

    html[data-app-sidebar-drawer-open].is-mobile-sidebar-drawer-closing .app-main-shell {
        transform: translate3d(0, 0, 0);
    }

    html[data-app-sidebar-drawer-open].is-mobile-sidebar-drawer-closing .app-main-shell::before {
        opacity: 0;
        transition: opacity 0.24s ease;
        pointer-events: none;
    }

    html[data-app-sidebar-drawer-open].is-mobile-sidebar-drawer-closing .app-sidebar:not(.is-collapsed) {
        transform: translate3d(calc(-1 * var(--mobile-sidebar-shift)), 0, 0);
        transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
        pointer-events: none;
    }

    html.is-mobile-sidebar-dragging,
    html.is-mobile-sidebar-dragging body,
    html.is-mobile-sidebar-dragging-open,
    html.is-mobile-sidebar-dragging-open body,
    html.is-mobile-chat-history-dragging,
    html.is-mobile-chat-history-dragging body {
        overflow: hidden;
    }

    html.is-mobile-sidebar-dragging,
    html.is-mobile-sidebar-dragging body,
    html.is-mobile-chat-history-dragging,
    html.is-mobile-chat-history-dragging body {
        touch-action: none;
    }

    html.is-mobile-sidebar-dragging .app-main-shell,
    html.is-mobile-sidebar-dragging .app-sidebar,
    html.is-mobile-chat-history-dragging .app-main-shell,
    html.is-mobile-chat-history-dragging .hero-chat-history-menu {
        transition: none !important;
    }

    html.is-mobile-sidebar-dragging .app-main-shell,
    html.is-mobile-sidebar-dragging-open .app-main-shell {
        position: relative;
        z-index: 120;
        border-radius: 18px 0 0 18px;
        overflow: hidden;
    }

    html.is-mobile-sidebar-dragging .app-main-shell::before,
    html.is-mobile-sidebar-dragging-open .app-main-shell::before {
        content: "";
        display: block !important;
        position: absolute;
        inset: 0;
        z-index: 400;
        background: rgba(0, 0, 0, 0.42);
        opacity: var(--sidebar-dim, 0);
        pointer-events: none;
        border-radius: inherit;
    }

    /* 跟手打开：侧栏仍是 collapsed，但按展开抽屉画出并跟手从左侧滑入 */
    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed {
        --sidebar-pad-top: max(10px, var(--safe-top));
        --sidebar-current-w: var(--mobile-sidebar-shift);
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 40;
        width: var(--mobile-sidebar-shift) !important;
        min-width: 0 !important;
        max-width: none;
        flex-basis: 0;
        margin: 0;
        padding: var(--sidebar-pad-top) 0 max(12px, var(--safe-bottom));
        overflow: hidden;
        background: var(--topbar-bg, var(--bg-base));
        border: none;
        pointer-events: none;
        box-shadow: none;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed #main-nav,
    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed #app-sidebar-footer {
        display: flex !important;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head {
        position: static;
        left: auto;
        top: auto;
        z-index: auto;
        width: 100%;
        height: var(--topbar-chrome-h);
        min-height: var(--topbar-chrome-h);
        min-width: 0;
        margin: 0;
        padding: 0 12px;
        justify-content: space-between;
        align-items: center;
        pointer-events: none;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo {
        position: static;
        inset: auto;
        flex: 1 1 auto;
        width: auto;
        height: auto;
        min-width: 0;
        justify-content: flex-start;
        opacity: 1;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo .logo-icon {
        width: auto;
        min-width: var(--topbar-chrome-h);
        height: var(--topbar-chrome-h);
        padding: 2px;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo .logo-icon-img {
        display: block;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo-menu-icon,
    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head.is-logo-menu-hint-menu .app-sidebar-logo-menu-icon {
        display: none !important;
    }

    /* 跟手打开期间仍带 .is-collapsed，强制用展开抽屉的水平图标+文字，避免先竖排再横排 */
    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-nav > .nav-item[data-nav],
    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-nav > .sidebar-nav-group > .sidebar-nav-group-toggle {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: auto;
        min-height: 48px;
        padding: 6px 12px 5px calc((var(--sidebar-w-collapsed, 72px) - 16px - var(--sidebar-nav-icon-size, 20px)) / 2);
        gap: 10px;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-nav > .nav-item[data-nav] > span,
    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-nav > .sidebar-nav-group > .sidebar-nav-group-toggle > span:not(.sidebar-nav-group-chevron) {
        display: inline-block;
        opacity: 1;
        max-width: 160px;
        width: auto;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 400;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed #app-sidebar-site-name {
        position: absolute;
        top: var(--sidebar-pad-top);
        left: calc(12px + var(--topbar-chrome-h) + 8px);
        z-index: 3;
        width: auto;
        max-width: calc(100% - 12px - var(--topbar-chrome-h) - 8px - (var(--topbar-chrome-h) - 4px) - 20px);
        height: var(--topbar-chrome-h);
        display: flex !important;
        align-items: center;
        padding: 0;
        font-size: 16px;
        letter-spacing: 0.5px;
        text-align: left;
        white-space: nowrap;
        pointer-events: none;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-footer {
        align-items: stretch;
        padding: 8px;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-user-wrap-host:has(> #user-menu-wrap.is-sidebar-docked) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        grid-template-areas: "avatar notify asset points";
        justify-content: start;
        justify-items: start;
        align-items: center;
        column-gap: 6px;
        row-gap: 0;
        width: 100%;
        min-height: var(--sidebar-docked-avatar-size, 28px);
        flex-direction: row;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-user-wrap-host > #user-menu-wrap {
        grid-area: avatar !important;
        justify-self: stretch;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        flex-direction: row;
        align-items: center;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-user-wrap-host > #user-menu-notify-btn.is-sidebar-docked-action {
        grid-area: notify !important;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-user-wrap-host > #asset-library-trigger.is-sidebar-asset-trigger {
        grid-area: asset !important;
    }

    html.is-mobile-sidebar-dragging-open:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-user-wrap-host > #topbar-points-pill.is-sidebar-docked-points {
        grid-area: points !important;
        flex-direction: row;
        align-items: center;
        height: auto;
        min-height: 0;
        padding: 0;
    }

    html.is-mobile-sidebar-dragging-open[data-sidebar-footer-auth-docked]:not([data-workflow-active])
        .app-sidebar.is-collapsed
        .app-sidebar-user-wrap-host
        > #user-menu-wrap.is-sidebar-docked
        > .user-menu-name {
        display: block;
        min-width: 0;
        flex: 1 1 auto;
        max-width: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--text-primary);
    }

    @media (prefers-reduced-motion: reduce) {
        .app-main-shell {
            transition: none !important;
        }
    }

    /* 右侧对话历史抽屉：主内容左移让位（镜像左侧导航抽屉效果）
       菜单宽度与 10-composer-send.css 的 .hero-chat-history-menu 保持一致（min(340px, 92vw)） */
    html[data-mobile-chat-history-drawer-open],
    html[data-mobile-chat-history-drawer-open] body {
        overflow: hidden;
    }

    html[data-mobile-chat-history-drawer-open] .app-main-shell {
        position: relative;
        z-index: 120;
        transform: translate3d(calc(-1 * min(340px, 92vw)), 0, 0);
        border-radius: 0 18px 18px 0;
        overflow: hidden;
    }

    html[data-mobile-chat-history-drawer-open] .app-main-shell::before {
        content: "";
        display: block !important;
        position: absolute;
        inset: 0;
        z-index: 400;
        background: rgba(0, 0, 0, 0.42);
        opacity: var(--chat-history-dim, 1);
        pointer-events: auto;
        border-radius: inherit;
    }

    /* 关闭中：先把主内容回位、遮罩淡出，等动画结束再拆属性，避免右滑松手闪白 */
    html[data-mobile-chat-history-drawer-open].is-mobile-chat-history-drawer-closing .app-main-shell {
        transform: translate3d(0, 0, 0);
    }

    html[data-mobile-chat-history-drawer-open].is-mobile-chat-history-drawer-closing .app-main-shell::before {
        opacity: 0;
        transition: opacity 0.24s ease;
        pointer-events: none;
    }

    /* 遮罩视觉由主内容 ::before 承担，backdrop 仅负责"点击菜单外关闭"（保持透明避免双重变暗） */
    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu-backdrop {
        background: transparent;
    }

    /* 对话列表抽屉面板：样式对齐网站侧边栏（直角 + 实底 + 无阴影）
       第二条选择器覆盖关闭动画期间（属性已移除、面板仍在滑出）的样式，避免收起时闪回圆角 */
    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu,
    body .hero-chat-history-menu:not(.is-open) {
        border-radius: 0;
        /* 手机上抽屉的底色是 --topbar-bg（比 panel-surface-bg 更深）：
           菜单里那些叠色片（第 332 轮的 --hero-chat-history-menu-chip-mix）要跟着它走，
           不然会比面板亮一档。 */
        --hero-chat-history-menu-chip-mix: var(--topbar-bg, var(--bg-base));
        background: var(--topbar-bg, var(--bg-base));
        box-shadow: none;
    }

    /* 与网站侧边栏一致的安全区避让：顶部让出刘海，底部让出小白条 */
    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-head {
        padding-top: max(14px, var(--safe-top));
    }

    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-body,
    body .hero-chat-history-menu .hero-chat-history-menu-body {
        display: contents;
    }

    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-head,
    body .hero-chat-history-menu .hero-chat-history-menu-head {
        order: 0;
        flex-shrink: 0;
        justify-content: flex-start;
    }

    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-head-title,
    body .hero-chat-history-menu .hero-chat-history-menu-head-title {
        /* 第 620 轮：右侧那 40px 是给原来那颗关闭键让的位 —— 现在头部靠 84px 内衬统一让位，
           标题自己不再各留一刀（多选 / 分享两颗键就并排挂在它右边）。 */
        padding: 0;
        text-align: left;
    }

    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-scroll,
    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-pinned-zone,
    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-pinned-divider,
    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-empty,
    body .hero-chat-history-menu .hero-chat-history-menu-scroll,
    body .hero-chat-history-menu .hero-chat-history-menu-pinned-zone,
    body .hero-chat-history-menu .hero-chat-history-menu-pinned-divider,
    body .hero-chat-history-menu .hero-chat-history-menu-empty {
        order: 1;
    }

    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-scroll,
    body .hero-chat-history-menu .hero-chat-history-menu-scroll {
        flex: 1 1 auto;
        min-height: 0;
        margin-top: 0;
        padding-bottom: 6px;
    }

    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-empty,
    body .hero-chat-history-menu .hero-chat-history-menu-empty {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* 吸顶分组头与底部批量操作栏：实底与抽屉面板背景保持一致（暗色下 #121212 ≠ panel-surface-bg） */
    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-group-head,
    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-batch-bar {
        background: var(--topbar-bg, var(--bg-base));
    }

    /* 批量操作栏沉到抽屉最底（列表 order:1 之下）。
       ⚠️ 第 620 轮把那排悬浮胶囊整组撤掉时，这条 order 差点被一起带走 ——
       少了它会退回默认的 0，批量栏会当场窜到标题下面去。 */
    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-batch-bar,
    body .hero-chat-history-menu .hero-chat-history-menu-batch-bar {
        order: 4;
    }

    /* 批量操作栏贴抽屉底部：让出小白条安全区，避免按钮被遮挡 */
    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-batch-bar {
        padding-bottom: max(12px, var(--safe-bottom));
    }

    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-head {
        background: var(--mobile-chat-glass-bg, color-mix(in srgb, var(--topbar-bg, var(--bg-base)) 70%, transparent));
        backdrop-filter: var(--mobile-chat-glass-filter, blur(10px) saturate(1.5));
        -webkit-backdrop-filter: var(--mobile-chat-glass-filter, blur(10px) saturate(1.5));
    }

    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-item,
    body .hero-chat-history-menu .hero-chat-history-menu-item {
        height: 42px;
        min-height: 42px;
    }

    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-open,
    body .hero-chat-history-menu .hero-chat-history-menu-open {
        min-height: 42px;
    }

    html[data-mobile-chat-history-drawer-open] .hero-chat-history-menu .hero-chat-history-menu-body > .hero-chat-history-menu-divider:not(.hero-chat-history-menu-pinned-divider) {
        display: none;
    }

    /* 收起：不占布局宽度，侧边栏在屏外，仅左上角浮动 logo */
    html:not([data-workflow-active]) .app-sidebar.is-collapsed {
        --sidebar-current-w: 0;
        width: 0;
        min-width: 0;
        flex-basis: 0;
        padding: 0;
        margin: 0;
        overflow: visible;
        background: transparent;
        border: none;
        pointer-events: none;
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed #main-nav,
    html:not([data-workflow-active]) .app-sidebar.is-collapsed #app-sidebar-footer {
        display: none !important;
    }

    html:not([data-app-sidebar-mobile-rail]) .app-sidebar.is-collapsed > .app-sidebar-sync-dot {
        display: none !important;
    }

    html:not([data-workflow-active]) .app-sidebar:not(.is-collapsed) > .app-sidebar-sync-dot {
        left: 10px;
        bottom: max(10px, var(--safe-bottom));
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed #app-sidebar-site-name {
        display: none !important;
    }

    /* 画布页侧栏收为 0 宽且 overflow:visible：站名绝对定位会溢出成竖排文字残留，需隐藏 */
    html[data-workflow-active]:not([data-wf-projects-home]) .app-sidebar.is-collapsed #app-sidebar-site-name {
        display: none !important;
    }

    /* 手机端点 Logo：显示电脑端收缩窄栏，而不是拉满抽屉 */
    html[data-app-sidebar-mobile-rail] {
        --sidebar-w-collapsed: 72px;
    }

    html[data-app-sidebar-mobile-rail] .app-main-shell::before {
        display: none !important;
    }

    html[data-app-sidebar-mobile-rail] .app-sidebar.is-collapsed {
        --sidebar-w-collapsed: 72px;
        --sidebar-current-w: 72px;
        --sidebar-pad-top: max(10px, var(--safe-top));
        display: flex !important;
        position: fixed;
        left: 12px;
        /* 面板顶部距离 logo 按钮（span）下方 15px，不再通栏到底 */
        top: calc(max(10px, var(--safe-top)) + 47px);
        bottom: auto;
        z-index: 110;
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px;
        flex-basis: 72px !important;
        height: auto;
        max-height: calc(100vh - max(10px, var(--safe-top)) - 69px);
        margin: 0;
        padding: 6px 0;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        background: var(--topbar-bg, var(--bg-base));
        border: 1px solid var(--border-soft);
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
        /* 必须清掉滤镜，否则 fixed 定位的 logo 开关会以面板为包含块 */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        pointer-events: auto;
        align-items: center;
    }

    html[data-app-sidebar-mobile-rail] .app-sidebar.is-collapsed #main-nav,
    html[data-app-sidebar-mobile-rail] .app-sidebar.is-collapsed #app-sidebar-footer {
        display: flex !important;
        pointer-events: auto;
    }

    html[data-app-sidebar-mobile-rail] .app-sidebar.is-collapsed .app-sidebar-collapse-btn {
        display: none !important;
    }

    html[data-app-sidebar-mobile-rail] .app-sidebar.is-collapsed .app-sidebar-head {
        /* logo 按钮固定在页面左上角原位，作为面板开关（面板从其下方 15px 处悬浮展开） */
        position: fixed;
        left: 10px;
        top: max(10px, var(--safe-top));
        z-index: 120;
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 2px;
        justify-content: center;
        align-items: center;
        pointer-events: auto;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    html[data-app-sidebar-mobile-rail] .app-sidebar.is-collapsed .app-sidebar-logo {
        position: static;
        inset: auto;
        margin: 0;
        width: calc(var(--topbar-chrome-h) - 4px);
        height: calc(var(--topbar-chrome-h) - 4px);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    html[data-app-sidebar-mobile-rail] .app-sidebar.is-collapsed .app-sidebar-logo .logo-icon {
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

    /* 移动端抽屉展开时显示站名；窄轨收起态仍隐藏（72px 放不下） */
    html[data-app-sidebar-mobile-rail] .app-sidebar.is-collapsed #app-sidebar-site-name {
        display: none !important;
    }

    html[data-workflow-active] .topbar-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    html[data-workflow-active] .topbar-primary-nav-host:not(:empty) {
        order: 0;
    }

    /* 画布里顶栏不显示站名（点 Logo 开抽屉） */
    html[data-workflow-active] .topbar-site-name {
        display: none;
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-collapse-btn {
        display: none !important;
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head:hover .app-sidebar-logo,
    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head:focus-within .app-sidebar-logo,
    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head.is-logo-toggle-revealed .app-sidebar-logo {
        opacity: 1;
        pointer-events: auto;
    }

    @media (hover: none) {
        html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head:focus-within .app-sidebar-logo {
            opacity: 1;
            pointer-events: auto;
        }
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo-menu-icon {
        display: none;
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head.is-logo-menu-hint-menu .app-sidebar-logo-menu-icon {
        display: flex;
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo .logo-icon {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        width: 100%;
        height: 100%;
        min-width: 0;
        padding: 2px;
        background: transparent;
        perspective: 480px;
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo-flip {
        width: 100%;
        height: 100%;
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head.is-logo-menu-hint-menu .app-sidebar-logo-flip {
        transform: rotateY(180deg);
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo-menu-icon {
        color: #dea970;
    }

    /* 第 623 轮需求（移动端）：「@div(.app-sidebar-logo) 的图标线条粗一些」——
       这里压着 markup 里那个 stroke-width（1.4 把第 619 轮写进 index.html 的 2 又盖回去了，
       所以那轮改完实机没变化）。现在直接提到 2.2：比旁边那颗对话列表键（2）再粗一档。 */
    html:not([data-workflow-active]) .app-sidebar-logo-menu-icon svg {
        stroke-width: 2.2;
    }

    html:not([data-workflow-active]) .app-sidebar-collapse-btn-icon-bars {
        stroke-width: 1.75;
    }

    /* 手机端收起态 Logo：固定显示三线菜单图标（末行更短，见 index.html），
       不再翻转切换 favicon；图标用主题前景色（参考图为深色线条） */
    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo .logo-icon-img {
        display: none;
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo-menu-icon,
    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head.is-logo-menu-hint-menu .app-sidebar-logo-menu-icon {
        display: flex;
        transform: none;
        color: var(--text-primary);
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo-flip,
    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head.is-logo-menu-hint-menu .app-sidebar-logo-flip {
        transform: none !important;
        transition: none;
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo-menu-icon svg {
        width: 18px;
        height: 18px;
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head {
        position: fixed;
        left: max(10px, var(--safe-left));
        top: max(10px, var(--safe-top));
        z-index: 130;
        width: var(--topbar-sync-chrome-h, calc(var(--topbar-chrome-h) - 4px));
        height: var(--topbar-sync-chrome-h, calc(var(--topbar-chrome-h) - 4px));
        min-width: var(--topbar-sync-chrome-h, calc(var(--topbar-chrome-h) - 4px));
        margin: 0;
        padding: 0;
        justify-content: center;
        align-items: center;
        pointer-events: auto;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo {
        position: static;
        inset: auto;
        width: 100%;
        height: 100%;
        opacity: 1;
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo .logo-icon {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        width: 100%;
        height: 100%;
        min-width: 0;
        padding: 2px;
        background: transparent;
    }

    html[data-app-sidebar-mobile-rail]:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head {
        /* logo 按钮固定在页面左上角原位作为面板开关（与上方 rail 悬浮面板规则配套） */
        position: fixed;
        left: 10px;
        top: max(10px, var(--safe-top));
        z-index: 120;
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 2px;
        justify-content: center;
        align-items: center;
        pointer-events: auto;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    html[data-app-sidebar-mobile-rail]:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo {
        position: static;
        inset: auto;
        margin: 0;
        width: calc(var(--topbar-chrome-h) - 4px);
        height: calc(var(--topbar-chrome-h) - 4px);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    html[data-app-sidebar-mobile-rail]:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-logo-menu-icon,
    html[data-app-sidebar-mobile-rail]:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head.is-logo-menu-hint-menu .app-sidebar-logo-menu-icon {
        display: none !important;
    }

    html[data-app-sidebar-mobile-rail]:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head.is-logo-menu-hint-menu .app-sidebar-logo-flip {
        transform: none;
    }

    html[data-app-sidebar-mobile-rail]:not([data-workflow-active]) .topbar,
    html[data-app-sidebar-mobile-rail][data-mobile-home-chat-shell] .main:has(#panel-home.is-active) .topbar,
    html[data-app-sidebar-mobile-rail][data-template-tabs-docked] .topbar {
        padding-left: calc(72px + 8px);
    }

    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu:not([hidden]),
    html.is-user-menu-sheet-open #user-menu:not([hidden]) {
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: var(--topbar-h) !important;
        width: 100% !important;
        min-width: 0;
        max-width: none !important;
        height: calc(100dvh - var(--topbar-h));
        max-height: calc(100dvh - var(--topbar-h));
        margin: 0;
        padding-top: 0 !important;
        padding-bottom: max(12px, var(--safe-bottom));
        z-index: 225;
        box-sizing: border-box;
        border: none !important;
        border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0;
        box-shadow: var(--mobile-sheet-card-shadow);
        animation: asset-library-mobile-sheet-in 0.34s cubic-bezier(0.32, 0.72, 0, 1);
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu:not(.is-settings-view):not(.is-account-view):not(.is-models-view):not(.is-billing-view):not([hidden]) .user-menu-pane-main,
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu:not(.is-settings-view):not(.is-account-view):not(.is-models-view):not(.is-billing-view):not([hidden]) .user-menu-pane-main,
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu:not(.is-settings-view):not(.is-account-view):not(.is-models-view):not(.is-billing-view):not([hidden]) .user-menu-pane-main,
    html.is-user-menu-sheet-open #user-menu #user-menu-pane-main,
    html.is-user-menu-sheet-open #user-menu .user-menu-pane-main {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
    }

    html.is-user-menu-sheet-open .app-main-shell,
    html.is-user-menu-sheet-open .app-sidebar,
    html.is-user-menu-sheet-open #main-content,
    html.is-user-menu-sheet-open .main {
        overscroll-behavior: none;
        touch-action: none;
    }

    html.is-user-menu-sheet-open .user-menu-wrap.is-menu-open,
    html.is-user-menu-sheet-open #user-menu,
    html.is-user-menu-sheet-open #user-menu .user-menu-pane-main,
    html.is-user-menu-sheet-open #user-menu #settings-popover-body,
    html.is-user-menu-sheet-open #user-menu .user-menu-sub-body {
        touch-action: pan-y;
    }

    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu:not([hidden]) {
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-settings-view:not([hidden]),
    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-account-view:not([hidden]),
    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-models-view:not([hidden]),
    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-billing-view:not([hidden]),
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-settings-view:not([hidden]),
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-account-view:not([hidden]),
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-models-view:not([hidden]),
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-billing-view:not([hidden]),
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-settings-view:not([hidden]),
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-account-view:not([hidden]),
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-models-view:not([hidden]),
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-billing-view:not([hidden]) {
        top: var(--topbar-h) !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0;
        --user-menu-panel-h: calc(100dvh - var(--topbar-h));
        height: var(--user-menu-panel-h);
        max-height: var(--user-menu-panel-h);
        padding-bottom: max(12px, var(--safe-bottom));
        border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0;
        border-bottom: none;
        box-shadow: var(--mobile-sheet-card-shadow);
        animation: none;
        overflow: hidden;
        box-sizing: border-box;
    }

    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-settings-view:not([hidden]):has(.settings-dropdown.is-open),
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-settings-view:not([hidden]):has(.settings-dropdown.is-open),
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-settings-view:not([hidden]):has(.settings-dropdown.is-open) {
        overflow: visible;
    }

    /* 灵感页顶栏：与左上角 Logo 等高；空余时搜索自适应展开 */
    html[data-template-tabs-docked] {
        --topbar-row-top: max(10px, var(--safe-top));
        --topbar-sync-chrome-h: var(--topbar-chrome-h);
        --topbar-search-focused-h: var(--topbar-sync-chrome-h);
        --topbar-search-expanded-w: min(280px, calc(100vw - 32px - var(--safe-left) - var(--safe-right)));
        --topbar-search-focused-w: var(--topbar-search-expanded-w);
        /* 与实际顶栏高度一致，供圆角遮罩 / 滚动隐藏贴合底边 */
        --topbar-h: calc(var(--topbar-row-top) + var(--topbar-sync-chrome-h) + 10px);
    }

    html[data-template-tabs-docked]:has(.app-sidebar.is-collapsed) {
        --topbar-sync-chrome-h: calc(var(--topbar-chrome-h) - 4px);
        --topbar-search-focused-h: var(--topbar-sync-chrome-h);
    }

    /* 内容顶边贴合顶栏底边：去掉侧栏对齐留白 */
    html[data-template-tabs-docked] .content,
    html[data-template-tabs-docked] #main-content,
    .main:has(#panel-templates.is-active) .content {
        padding-top: 0 !important;
    }

    html[data-template-tabs-docked] #panel-templates.templates-page,
    html[data-template-tabs-docked] .templates-page,
    #panel-templates.templates-page {
        margin-top: 0;
        padding-top: 0 !important;
    }

    html[data-template-tabs-docked] .topbar-actions {
        display: contents;
    }

    html[data-template-tabs-docked] .topbar-template-tabs-slot:not([hidden]) + .topbar-actions,
    html[data-template-tabs-docked] .topbar-favorites-tabs-slot:not([hidden]) + .topbar-actions {
        margin-left: 0;
    }

    html[data-template-tabs-docked] .topbar-template-tabs-slot:not([hidden]),
    html[data-template-tabs-docked] .topbar-favorites-tabs-slot:not([hidden]) {
        flex: 1 1 auto;
        min-width: 0;
    }

    html[data-template-tabs-docked] .topbar-actions > .search-box:not([hidden]) {
        order: 2;
        margin-left: auto;
        margin-right: 0;
        flex: 0 0 auto;
    }

    html[data-template-tabs-docked] .topbar-actions > .topbar-right {
        order: 3;
        flex: 0 0 auto;
        width: max-content;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        position: relative;
        z-index: 136;
    }

    html[data-template-tabs-docked] .topbar,
    html[data-template-tabs-docked]:has(.app-sidebar.is-collapsed) .topbar {
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
        position: sticky;
        top: 0;
        z-index: 50;
        height: var(--topbar-h);
        min-height: var(--topbar-h);
        padding-top: var(--topbar-row-top);
        padding-left: calc(max(10px, var(--safe-left)) + var(--topbar-sync-chrome-h) + 8px);
        /* 与 #main-content / 灵感内容右缘同一套水平内边距 */
        padding-right: max(var(--template-content-pad-x, 16px), var(--safe-right));
        box-sizing: border-box;
    }

    html[data-template-tabs-docked] .topbar-template-tabs-slot:not([hidden]) {
        position: relative;
        z-index: 1;
        height: auto;
        min-height: var(--underline-tab-height);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked,
    html[data-template-tabs-docked] .topbar-template-tabs-slot #template-filter-tabs,
    html[data-template-tabs-docked] .topbar-template-tabs-slot #home-template-filter-tabs {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        min-height: 0;
        height: auto;
        scrollbar-width: none;
        --filter-tabs-indicator-radius: 8px;
        --filter-tabs-indicator-bg: var(--bg-elev-2);
        --filter-tabs-indicator-shadow: none;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]) {
        position: relative;
        flex: 0 0 auto;
        width: var(--topbar-sync-chrome-h);
        min-width: var(--topbar-sync-chrome-h);
        max-width: var(--topbar-sync-chrome-h);
        height: var(--topbar-sync-chrome-h);
        min-height: var(--topbar-sync-chrome-h);
        padding: 0;
        gap: 0;
        justify-content: center;
        overflow: hidden;
        z-index: 2;
        box-sizing: border-box;
        border: none;
        border-radius: 14px;
        background: transparent;
        box-shadow: none;
        opacity: 1;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]) .search-icon-btn {
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
        border-radius: 14px;
        color: var(--text-secondary);
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):not(.is-expanded):not(.is-search-click-open) .search-icon-btn:hover,
    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):not(.is-expanded):not(.is-search-click-open) .search-icon-btn:focus-visible {
        color: var(--text-primary);
        background: transparent;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):not(.is-expanded):not(.is-search-click-open) .search-expand,
    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):not(.is-expanded):not(.is-search-click-open) .search-clear-btn {
        display: none !important;
    }

    /* 手机端收起仅显示搜索图标；展开后左图标 + 输入框 + 右「搜索」按钮（对齐素材库） */
    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):not(.is-expanded):not(.is-search-click-open) .search-submit-btn {
        display: none !important;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]).is-search-pinned-open {
        flex: 0 0 auto;
        width: var(--topbar-sync-chrome-h);
        min-width: var(--topbar-sync-chrome-h);
        max-width: var(--topbar-sync-chrome-h);
        padding: 0;
        gap: 0;
        justify-content: center;
        border: none;
        border-radius: 14px;
        background: transparent;
    }

    html[data-template-tabs-docked] .topbar:has(.search-box.is-expanded) #template-filter-tabs,
    html[data-template-tabs-docked] .topbar:has(.search-box.is-search-click-open) #template-filter-tabs,
    html[data-template-tabs-docked][data-topbar-search-open] #template-filter-tabs,
    html[data-template-tabs-docked] .topbar:has(.search-box.is-expanded) #home-template-filter-tabs,
    html[data-template-tabs-docked] .topbar:has(.search-box.is-search-click-open) #home-template-filter-tabs,
    html[data-template-tabs-docked][data-topbar-search-open] #home-template-filter-tabs {
        display: none !important;
    }

    html[data-template-tabs-docked] .topbar:has(.search-box.is-expanded) .topbar-template-tabs-slot:not([hidden]),
    html[data-template-tabs-docked] .topbar:has(.search-box.is-search-click-open) .topbar-template-tabs-slot:not([hidden]),
    html[data-template-tabs-docked][data-topbar-search-open] .topbar-template-tabs-slot:not([hidden]) {
        flex: 0 0 auto;
        width: 0;
        min-width: 0;
        max-width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    html[data-template-tabs-docked] .topbar:has(.search-box.is-expanded) .topbar-actions > .topbar-right,
    html[data-template-tabs-docked] .topbar:has(.search-box.is-search-click-open) .topbar-actions > .topbar-right,
    html[data-template-tabs-docked][data-topbar-search-open] .topbar-actions > .topbar-right {
        position: absolute;
        top: var(--topbar-row-top, 0);
        right: max(var(--template-content-pad-x, 16px), var(--safe-right));
        margin-left: 0;
        margin-right: 0;
        flex: 0 0 auto;
        width: max-content;
        z-index: 150;
    }

    /* 搜索：点击后右缘固定，向左铺满分类 Tab 区域 */
    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) {
        position: absolute;
        top: 0;
        right: var(--topbar-search-expand-anchor-right, 0px);
        left: auto;
        margin-left: 0;
        margin-right: 0;
        flex: 0 0 auto;
        width: var(--topbar-search-expand-w, var(--topbar-sync-chrome-h));
        min-width: var(--topbar-sync-chrome-h);
        max-width: min(
            var(--topbar-search-expand-w, var(--topbar-sync-chrome-h)),
            calc(100vw - var(--topbar-search-expand-left-bound, 50px) - max(16px, var(--safe-right)))
        );
        height: var(--topbar-sync-chrome-h);
        min-height: var(--topbar-sync-chrome-h);
        padding: 0 4px 0 10px;
        gap: 4px;
        justify-content: flex-start;
        overflow: hidden;
        z-index: 140;
        border-radius: 14px;
        border: none;
        background: color-mix(in srgb, var(--text-primary) 10%, var(--bg-base));
        box-shadow: none;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        transition: width 0.2s ease;
    }

    html[data-template-tabs-docked]:has(.app-sidebar.is-collapsed) .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) {
        top: var(--topbar-row-top);
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-expand,
    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-expand input,
    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-clear-btn:not([hidden]) {
        opacity: 1 !important;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]).is-search-pinned-open .search-expand,
    html[data-template-tabs-docked] .topbar .search-box:not([hidden]).is-search-pinned-open .search-clear-btn,
    html[data-template-tabs-docked] .topbar .search-box:not([hidden]).is-search-pinned-open .search-submit-btn {
        display: none !important;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):not(.is-expanded):not(.is-search-click-open) .search-icon-btn:hover,
    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):not(.is-expanded):not(.is-search-click-open) .search-icon-btn:focus-visible {
        color: var(--text-primary);
        background: transparent;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-expand {
        display: flex !important;
        order: 1;
        position: static;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        opacity: 1 !important;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-expand input {
        opacity: 1 !important;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--text-primary);
        transition: none;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-expand input::placeholder {
        color: var(--text-tertiary);
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):not(.is-expanded):not(.is-search-click-open) .search-clear-btn {
        display: none !important;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-icon-btn {
        order: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin: 0;
        border-radius: 0;
        background: transparent;
        color: var(--text-secondary);
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-icon-btn svg {
        width: 16px;
        height: 16px;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-clear-btn:not([hidden]) {
        display: inline-flex !important;
        order: 2;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: calc(var(--topbar-sync-chrome-h) - 4px);
        height: calc(var(--topbar-sync-chrome-h) - 4px);
        min-width: calc(var(--topbar-sync-chrome-h) - 4px);
        min-height: calc(var(--topbar-sync-chrome-h) - 4px);
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: var(--text-secondary);
        opacity: 1 !important;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-clear-btn:not([hidden]) svg {
        width: 16px;
        height: 16px;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-submit-btn {
        display: inline-flex !important;
        order: 3;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: calc(var(--topbar-sync-chrome-h) - 4px);
        min-height: calc(var(--topbar-sync-chrome-h) - 4px);
        margin: 0;
        padding: 0 8px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--text-primary);
        font: inherit;
        font-size: var(--filter-tabs-tab-font-size, 13px);
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
    }

    /*
     * 关闭搜索按钮：展开搜索框后出现在最右端（order: 4，排在「搜索」右边）。
     * 基础样式在 05-language-dropdown.css 里是 display:none，这里才打开；
     * 收起时该规则不再匹配，按钮自动回到 display:none → 视觉上只剩左侧搜索图标。
     *
     * 外观：独立的圆形按钮（自带整块圆形底色），不再是一根贴在搜索框灰底上的细线。
     * 底色刻意沿用搜索框自身的公式 color-mix(text-primary 10%, bg-base)，只是把比例提到 19%：
     * 搜索框底 ≈ 10% 灰，按钮圆底 ≈ 19% 灰，两者只差一档，所以圆是「同一材质上的一枚按钮」
     * 而不是突兀的色块；又因为差了近一倍的浓度，圆形轮廓在浅色/深色主题下都清晰可辨。
     * 用 text-primary + bg-base 而不是写死颜色，是为了跟随主题自动反向（深色下变成浅圆底）。
     */
    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-close-btn {
        display: inline-flex !important;
        order: 4;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: calc(var(--topbar-sync-chrome-h) - 4px);
        height: calc(var(--topbar-sync-chrome-h) - 4px);
        min-width: calc(var(--topbar-sync-chrome-h) - 4px);
        min-height: calc(var(--topbar-sync-chrome-h) - 4px);
        margin: 0;
        padding: 0;
        border: none;
        /* 正圆：等宽等高 + 50% 圆角，保证是圆而不是胶囊 */
        border-radius: 50%;
        background: color-mix(in srgb, var(--text-primary) 19%, var(--bg-base));
        color: var(--text-primary);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-close-btn svg {
        /* 图标略小于圆底，留出圆环余量；否则 X 会顶到圆边、看着像被裁掉 */
        width: 15px;
        height: 15px;
        stroke-width: 2;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-close-btn:hover,
    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-close-btn:focus-visible {
        color: var(--text-primary);
        /* 悬停再深一档，保持「按下有反馈」 */
        background: color-mix(in srgb, var(--text-primary) 27%, var(--bg-base));
    }

    /* 灵感页画廊：手机端一行 2 个（含搜索结果 / 分列瀑布流） */
    #panel-templates .gallery,
    #panel-templates .gallery.is-masonry-cols {
        column-count: 2;
    }

    #panel-templates .gallery.is-search-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 灵感页分类切换：冻结顶栏动画，避免隐藏/显示与搜索布局联动闪烁 */
    html[data-template-category-switching][data-template-tabs-docked] .topbar,
    html[data-template-category-switching][data-template-tabs-docked] .topbar-template-tabs-slot:not([hidden]) {
        transition: none !important;
    }

    html[data-template-category-switching][data-template-tabs-docked][data-topbar-scroll-hidden] .topbar {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html[data-template-category-switching][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab {
        transition: none !important;
    }

    /* 灵感页分类切换：统一实底，避免重建瞬间透出底色（黑闪/白层） */
    html[data-template-tabs-docked],
    html[data-template-tabs-docked] body,
    html[data-template-tabs-docked] .content,
    html[data-template-tabs-docked] #main-content,
    html[data-template-tabs-docked] #panel-templates,
    html[data-template-tabs-docked] #panel-templates.templates-page,
    html[data-template-tabs-docked] #panel-templates .templates,
    html[data-template-tabs-docked] #panel-templates .gallery {
        background: #ffffff;
    }

    html[data-theme="dark"][data-template-tabs-docked],
    html[data-theme="dark"][data-template-tabs-docked] body,
    html[data-theme="dark"][data-template-tabs-docked] .content,
    html[data-theme="dark"][data-template-tabs-docked] #main-content,
    html[data-theme="dark"][data-template-tabs-docked] #panel-templates,
    html[data-theme="dark"][data-template-tabs-docked] #panel-templates.templates-page,
    html[data-theme="dark"][data-template-tabs-docked] #panel-templates .templates,
    html[data-theme="dark"][data-template-tabs-docked] #panel-templates .gallery {
        background: var(--bg-base);
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-template-tabs-docked],
        html[data-theme="system"][data-template-tabs-docked] body,
        html[data-theme="system"][data-template-tabs-docked] .content,
        html[data-theme="system"][data-template-tabs-docked] #main-content,
        html[data-theme="system"][data-template-tabs-docked] #panel-templates,
        html[data-theme="system"][data-template-tabs-docked] #panel-templates.templates-page,
        html[data-theme="system"][data-template-tabs-docked] #panel-templates .templates,
        html[data-theme="system"][data-template-tabs-docked] #panel-templates .gallery {
            background: var(--bg-base);
        }
    }

    /* 缩略图占位用主题感知实色，图片解码前不再露近黑底 */
    #panel-templates .gallery-thumb {
        background: var(--bg-elevated);
    }

    /* 灵感画廊卡片：作者/操作聚焦或点击后显示 */
    #panel-templates .gallery-overlay {
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    #panel-templates .gallery-item:hover .gallery-overlay,
    #panel-templates .gallery-item:focus-within .gallery-overlay,
    #panel-templates .gallery-item.is-overlay-revealed .gallery-overlay {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    #panel-templates .gallery-item:hover .gallery-thumb::after,
    #panel-templates .gallery-item:focus-within .gallery-thumb::after,
    #panel-templates .gallery-item.is-overlay-revealed .gallery-thumb::after,
    #panel-templates .gallery-thumb::after {
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    #panel-templates .gallery-item:hover .gallery-thumb::after,
    #panel-templates .gallery-item:focus-within .gallery-thumb::after,
    #panel-templates .gallery-item.is-overlay-revealed .gallery-thumb::after {
        opacity: 1;
    }

    #panel-templates .gallery-thumb.is-video::after {
        opacity: 1;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.72));
    }

    #panel-templates .gallery-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
        position: relative;
        min-height: 28px;
    }

    #panel-templates .gallery-creator-badge {
        padding: 0;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        /* 手机端故意保持常亮：触摸屏没有 hover，作者圆章要是也等「悬停」，
           就只剩点开那一瞬间能看见（底部那一行按钮点一下才露，是另一回事 ——
           那几个是操作，圆章是「谁做的」）。电脑端那条是悬停 / 聚焦才显示。 */
        opacity: 1;
        transform: none;
        pointer-events: none;
    }

    #panel-templates .gallery-creator-badge > span:not(.creator-avatar) {
        display: none;
    }

    #panel-templates .action-row {
        flex-wrap: nowrap;
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
        justify-content: flex-end;
        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    #panel-templates .gallery-item:hover .action-row,
    #panel-templates .gallery-item:focus-within .action-row,
    #panel-templates .gallery-item.is-overlay-revealed .action-row {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    #panel-templates .action-row .use-template-btn {
        order: 1;
    }

    #panel-templates .action-row .use-as-ref-btn {
        order: 2;
    }

    #panel-templates .action-row .favorite-btn {
        order: 3;
    }

    #home-templates-embed .action-row .use-template-btn {
        order: 1;
    }

    #home-templates-embed .action-row .use-as-ref-btn {
        order: 2;
    }

    #home-templates-embed .action-row .favorite-btn {
        order: 3;
    }

    /* 分类 Tab：紧跟左上角 Logo 右侧（侧边栏收起时，与顶栏同一行 flex 排布） */
    html[data-template-tabs-docked]:has(.app-sidebar.is-collapsed) .topbar-template-tabs-slot:not([hidden]) {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        width: auto;
        max-width: none;
        height: auto;
        min-height: var(--underline-tab-height);
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0 !important;
        z-index: 1;
        display: flex;
        align-items: center;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        pointer-events: auto;
        transition:
            transform 0.28s ease,
            opacity 0.28s ease,
            visibility 0.28s ease;
    }

    html[data-template-tabs-docked]:has(.app-sidebar:not(.is-collapsed)) .topbar-template-tabs-slot:not([hidden]) {
        flex: 1 1 auto;
        min-width: 0;
        height: auto;
        min-height: var(--underline-tab-height);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    html[data-template-tabs-docked] .topbar-template-tabs-slot:not([hidden])::-webkit-scrollbar {
        display: none;
    }

    /* 手机端分类 Tab：与桌面端扁平样式一致 + 触控优化 */
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked:hover .filter-tab,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab:hover,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab:focus,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab:focus-visible,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active:hover,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active:focus,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active:focus-visible,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked:hover .filter-tab.active {
        height: 32px;
        min-height: 32px;
        max-height: 32px;
        padding: 0 12px;
        gap: 0;
        border-radius: 8px;
        border: none;
        border-bottom: none;
        font-size: 14px;
        letter-spacing: normal;
        line-height: 1;
        box-sizing: border-box;
        box-shadow: none;
        min-width: 0;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: background 0.2s ease, color 0.2s ease;
    }

    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab {
        font-weight: 400;
        color: var(--text-secondary);
        background: transparent;
    }

    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab::after {
        content: none;
    }

    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab .filter-tab-label {
        transform: none;
    }

    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab:hover:not(.active),
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab:focus:not(.active),
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab:focus-visible:not(.active) {
        color: var(--text-primary);
        background: rgba(0, 0, 0, 0.04);
        box-shadow: none;
    }

    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active:hover,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active:focus,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active:focus-visible,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked:hover .filter-tab.active {
        color: var(--text-primary);
        font-weight: 500;
        background: var(--bg-elev-2);
        box-shadow: none;
        outline: none;
    }

    /* 滑动指示器模式：active 背景透明（由 indicator 显示） */
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator .filter-tab.active,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator .filter-tab.active:hover,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator .filter-tab.active:focus,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator .filter-tab.active:focus-visible,
    html[data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator:hover .filter-tab.active,
    html[data-theme="dark"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator .filter-tab.active,
    html[data-theme="dark"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator .filter-tab.active:hover,
    html[data-theme="dark"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator .filter-tab.active:focus,
    html[data-theme="dark"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator .filter-tab.active:focus-visible,
    html[data-theme="dark"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator:hover .filter-tab.active {
        background: transparent;
        box-shadow: none;
    }

    /* 深色模式 */
    html[data-theme="dark"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab:hover:not(.active),
    html[data-theme="dark"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab:focus:not(.active),
    html[data-theme="dark"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab:focus-visible:not(.active) {
        background: rgba(255, 255, 255, 0.06);
    }

    html[data-theme="dark"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active,
    html[data-theme="dark"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active:hover,
    html[data-theme="dark"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active:focus,
    html[data-theme="dark"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active:focus-visible,
    html[data-theme="dark"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked:hover .filter-tab.active {
        background: var(--bg-elev-2);
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab:hover:not(.active),
        html[data-theme="system"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab:focus:not(.active),
        html[data-theme="system"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab:focus-visible:not(.active) {
            background: rgba(255, 255, 255, 0.06);
        }

        html[data-theme="system"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active,
        html[data-theme="system"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active:hover,
        html[data-theme="system"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active:focus,
        html[data-theme="system"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked .filter-tab.active:focus-visible,
        html[data-theme="system"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked:hover .filter-tab.active {
            background: var(--bg-elev-2);
        }

        html[data-theme="system"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator .filter-tab.active,
        html[data-theme="system"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator .filter-tab.active:hover,
        html[data-theme="system"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator .filter-tab.active:focus,
        html[data-theme="system"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator .filter-tab.active:focus-visible,
        html[data-theme="system"][data-template-tabs-docked] .topbar-template-tabs-slot .filter-tabs.is-docked.has-sliding-indicator:hover .filter-tab.active {
            background: transparent;
            box-shadow: none;
        }
    }

    #asset-library-modal .asset-library-section-tabs .tab {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    html[data-template-tabs-docked] {
        --template-content-pad-x: 16px;
        --template-tabs-topbar-pad-x: 12px;
    }

    .templates-page {
        padding-top: 0;
        padding-bottom: max(40px, calc(40px + var(--safe-bottom)));
    }

    :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded {
        background: var(--hero-chat-surface-bg);
        box-shadow: none !important;
        border: none !important;
        overflow: visible;
        --home-prompt-resize-handle-gutter: 40px;
    }

    #panel-home .hero > .quick-prompts[hidden] {
        display: none !important;
    }

    /* 手机端无首页光标特效：只隐藏该设置段，避免误伤画布/分组等复用同一行 class 的控件 */
    .user-menu-settings-body .settings-section-home-cursor {
        display: none !important;
    }

    #settings-popover-body .settings-section-home-cursor::after {
        display: none !important;
    }

    .user-menu-settings-body .settings-dropdown:not(.is-open) .settings-dropdown-chevron {
        display: none;
    }

    .user-menu-settings-body .settings-edge-effect-dropdown:not(.is-open) .settings-dropdown-chevron,
    .user-menu-settings-body .settings-snap-guide-dropdown:not(.is-open) .settings-dropdown-chevron {
        display: block;
        flex-shrink: 0;
    }

    .user-menu-settings-body .settings-section-chat-bubble .settings-topbar,
    .user-menu-settings-body .settings-section-home-cursor .settings-topbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .user-menu-settings-body .settings-section-chat-bubble .settings-topbar-row:has(.settings-topbar-color),
    .user-menu-settings-body .settings-section-chat-bubble .settings-chat-bubble-color-row,
    .user-menu-settings-body .settings-section-home-cursor .settings-home-cursor-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        gap: 8px;
    }

    .user-menu-settings-body .settings-section-chat-bubble .settings-topbar-row:has(.settings-topbar-color) .settings-topbar-color,
    .user-menu-settings-body .settings-section-chat-bubble .settings-chat-bubble-color-row .settings-topbar-color {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin-left: auto;
    }

    .user-menu-settings-body .settings-section-chat-bubble .settings-chat-bubble-enabled-toggle {
        display: inline-flex;
        flex: 0 0 auto;
        width: auto;
        margin-inline-start: 4px;
        flex-shrink: 0;
    }

    /* 顶栏：手机端仅在设置开启滚动隐藏时生效（默认关闭） */

    html[data-mobile-home-chat-shell] {
        --topbar-row-top: max(10px, var(--safe-top));
        --topbar-sync-chrome-h: var(--topbar-chrome-h);
        --mobile-home-prompt-box-inset: 10px;
        /* 对话态共用的「磨砂」参数：顶栏 / 拖拽横杆区 / 创作栏三者保持一致 */
        --mobile-chat-glass-bg: color-mix(in srgb, var(--bg-base) 72%, transparent);
        --mobile-chat-glass-filter: blur(10px) saturate(1.5);
        /* 顶栏下缘往下的「白色遮罩」高度：这 15px 内由顶栏底色平滑渐隐到透明 */
        --mobile-chat-top-fade-h: 15px;
        /* 顶部磨砂层总高 = 顶栏高 + 下方白色遮罩高。
           注意：在 .hero 作用域内会重算（见对话态 sheet 定位规则），
           因为这里定义在 html 上，--topbar-h 会按 html 的值求值而与顶栏实际高度不符 */
        --mobile-chat-content-top: calc(var(--topbar-h, 52px) + var(--mobile-chat-top-fade-h));
    }

    html[data-mobile-home-chat-shell]:has(.app-sidebar.is-collapsed) {
        --topbar-sync-chrome-h: calc(var(--topbar-chrome-h) - 4px);
    }

    html[data-mobile-home-chat-shell] .app-sidebar.is-collapsed .app-sidebar-head {
        z-index: 160;
    }

    /* 手机端首页：顶栏 + 对话框 + 底栏操作区 */
    html[data-mobile-home-chat-shell] {
        --mobile-home-hero-dock-lift: 0;
        --mobile-home-hero-top-gap: 1px;
        --mobile-home-hero-height-extra: 0px;
        --mobile-sheet-top-gap: var(--mobile-home-hero-top-gap);
        --mobile-sheet-panel-h: calc(100dvh - var(--topbar-h) - var(--mobile-sheet-top-gap) + var(--mobile-home-hero-height-extra) - var(--keyboard-inset, 0px));
        --mobile-home-hero-card-h: var(--mobile-sheet-panel-h);
        --mobile-sheet-panel-top: calc(var(--topbar-h) + var(--mobile-sheet-top-gap));
        --mobile-home-body-below-title-offset: 40px;
        --mobile-home-title-prompt-gap: 40px;
    }

    html[data-mobile-home-chat-shell] .app-layout {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }

    html[data-mobile-home-chat-shell] .app-main-shell:has(#panel-home.is-active) {
        flex: 1 1 0%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    html[data-mobile-home-chat-shell] .main:has(#panel-home.is-active) {
        --topbar-h: calc(var(--topbar-row-top, max(10px, env(safe-area-inset-top, 0px))) + var(--topbar-sync-chrome-h, 32px) + 10px);
        flex: 1 1 0%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: 100dvh;
        overflow: hidden;
    }

    html[data-mobile-home-chat-shell] .main:has(#panel-home.is-active) .topbar {
        display: flex !important;
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        z-index: 50;
        height: calc(var(--topbar-row-top, max(10px, env(safe-area-inset-top, 0px))) + var(--topbar-sync-chrome-h, 32px) + 10px);
        min-height: calc(var(--topbar-row-top, max(10px, env(safe-area-inset-top, 0px))) + var(--topbar-sync-chrome-h, 32px) + 10px);
        padding-top: var(--topbar-row-top, max(10px, env(safe-area-inset-top, 0px)));
        padding-left: calc(max(10px, var(--safe-left)) + var(--topbar-sync-chrome-h, 32px) + 8px);
        padding-right: max(var(--mobile-home-prompt-box-inset, 10px), var(--safe-right));
        box-sizing: border-box;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 8px;
        /* 顶栏半透明磨砂：内容从顶栏下方滚过时可透出并模糊 */
        background: color-mix(in srgb, var(--topbar-bg, var(--bg-base)) 70%, transparent);
        backdrop-filter: blur(18px) saturate(1.6);
        -webkit-backdrop-filter: blur(18px) saturate(1.6);
    }

    html[data-mobile-home-chat-shell] .main:has(#panel-home.is-active) .topbar-left {
        position: absolute;
        left: calc(max(10px, var(--safe-left)) + var(--topbar-sync-chrome-h, 32px) + 8px);
        top: var(--topbar-row-top, max(10px, env(safe-area-inset-top, 0px)));
        display: flex;
        align-items: center;
        height: var(--topbar-sync-chrome-h, 32px);
        margin-left: 0;
        min-width: 0;
        max-width: calc(100% - max(16px, var(--safe-right)) - max(10px, var(--safe-left)) - var(--topbar-sync-chrome-h, 32px) - 16px);
        pointer-events: none;
        z-index: 1;
    }

    html[data-mobile-home-chat-shell] .main:has(#panel-home.is-active) .topbar-site-name {
        display: flex;
        align-items: center;
        height: var(--topbar-sync-chrome-h, 32px);
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0.02em;
        box-sizing: border-box;
    }

    html[data-mobile-home-chat-shell]:has(.app-sidebar.is-collapsed) .main:has(#panel-home.is-active) .topbar-site-name.is-mobile-sidebar-toggle {
        pointer-events: auto;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    html[data-mobile-home-chat-shell] .main:has(#panel-home.is-active) .topbar-right {
        margin-right: 0;
    }

    html[data-mobile-home-chat-shell] .main:has(#panel-home.is-active) .topbar-actions > .search-box[hidden] {
        display: none !important;
    }

    html[data-mobile-home-chat-shell] .app-main-shell:has(#panel-home.is-active),
    html[data-mobile-home-chat-shell] .content:has(#panel-home.is-active),
    html[data-mobile-home-chat-shell] #main-content:has(#panel-home.is-active),
    html[data-mobile-home-chat-shell] #panel-home.is-active {
        flex: 1 1 0%;
        min-height: 0;
        max-height: none;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    html[data-mobile-home-chat-shell] #panel-home:has(.hero-results:not([hidden])) {
        flex: 1 1 0%;
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
    }

    html[data-mobile-home-chat-shell] .content:has(#panel-home.is-active),
    html[data-mobile-home-chat-shell] #main-content:has(#panel-home.is-active) {
        padding: 0;
    }

    /* 手机端首页：对话框 + 创作栏 + 快捷提示词 合并为底部 sheet 卡片 */
    html[data-mobile-home-chat-shell] #panel-home.is-active {
        padding-top: 0;
        padding-bottom: 0;
        justify-content: flex-start;
        background: var(--bg-base);
    }

    @keyframes mobile-home-hero-card-in {
        from {
            transform: translate3d(0, 100%, 0);
        }
        to {
            transform: translate3d(0, 0, 0);
        }
    }

    html[data-mobile-home-chat-shell] #panel-home .hero {
        position: fixed;
        top: var(--mobile-sheet-panel-top);
        right: 0;
        bottom: var(--keyboard-inset, 0px);
        left: 0;
        flex: none;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-content: stretch;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: var(--mobile-sheet-panel-h);
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
        border: none;
        border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0;
        /* 底色跟主题色走。原来写的是 var(--hero-chat-surface-bg, #ffffff)：
           --hero-chat-surface-bg 只在「对话态」（.hero-results 可见）下由 07-hero.css 定义，
           值是面板色 90% 的玻璃（深色 #1e1e1e@90%），于是这块整屏 sheet 的底色卡在面板色上，
           用户改「自定义主题色」时首页纹丝不动 —— 桌面端同一条对话态规则里写的却是
           background: var(--bg-base)，注释也写着「底色跟主题页背景走，避免玻璃半透明和页面色不一致」；
           移动端这条是后来加的，把那份意图盖掉了。这里改回 var(--bg-base)。
           没定义 --hero-chat-surface-bg 时兜底也不再是写死的 #ffffff（深色下会白成一张纸）。
           只改 hero 自己的 background，--hero-chat-surface-bg 变量本身留着 —— 卡内的气泡/面板还在用它。 */
        background: var(--bg-base, #fff);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: var(--mobile-sheet-card-shadow);
        animation: mobile-home-hero-card-in 0.34s cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform;
        z-index: 1;
    }

    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home .hero {
        --prompt-stack-surface-bg: #2c2c2e;
        --prompt-stack-surface-border: rgba(255, 255, 255, 0.1);
        --prompt-stack-surface-border-strong: rgba(255, 255, 255, 0.2);
        --prompt-stack-plus-color: rgba(255, 255, 255, 0.52);
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-home-chat-shell] #panel-home .hero {
            --prompt-stack-surface-bg: #2c2c2e;
            --prompt-stack-surface-border: rgba(255, 255, 255, 0.1);
            --prompt-stack-surface-border-strong: rgba(255, 255, 255, 0.2);
            --prompt-stack-plus-color: rgba(255, 255, 255, 0.52);
        }
    }

    html[data-mobile-home-chat-shell] #panel-home .hero > .mobile-sheet-dismiss-zone {
        order: -10;
        flex: 0 0 auto;
        min-height: 20px;
        height: 20px;
        margin: 0;
        padding: 0;
        align-self: stretch;
        width: 100%;
    }

    /* 对话名称：在顶栏水平居中（左侧玻璃 Logo 42px、右侧胶囊 64px + 10px 间距，
       故左右各留 76px 安全区，居中时不会压到两侧控件）；超出部分省略号截断 */
    html[data-mobile-home-chat-shell] .main:has(#panel-home.is-active) .topbar > .hero-results-head-center {
        position: absolute;
        left: 50%;
        right: auto;
        /* 只做水平居中，纵向位置由 top 决定（覆盖桌面端的 translate(-50%, -50%)） */
        transform: translateX(-50%);
        top: var(--topbar-row-top, max(10px, env(safe-area-inset-top, 0px)));
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: auto;
        max-width: calc(100% - 152px);
        min-width: 0;
        height: var(--topbar-sync-chrome-h, 32px);
        margin: 0;
        /* 仅标题本身可点，避免整条居中线挡住 Logo / 胶囊 */
        pointer-events: none;
    }

    html[data-mobile-home-chat-shell]
        .main:has(#panel-home.is-active)
        .topbar
        > .hero-results-head-center
        .hero-results-head-title-row {
        justify-content: center;
        max-width: 100%;
    }

    html[data-mobile-home-chat-shell] .main:has(#panel-home.is-active) .topbar > .hero-results-head-center .hero-results-chat-title {
        flex: 0 1 auto;
        width: fit-content;
        /* 标题最多占 150px，更长时省略号截断（不挤压两侧 Logo / 胶囊） */
        max-width: 150px;
        min-width: 0;
        /* 左对齐：截断时从开头显示（按钮本身仍由 .hero-results-head-center 居中） */
        justify-content: flex-start;
        text-align: left;
        font-size: 14px;
        color: var(--text-primary);
    }

    html[data-mobile-home-chat-shell] .main:has(#panel-home.is-active) .topbar .topbar-site-name {
        display: none;
    }

    html[data-mobile-home-chat-shell] .main:has(> .topbar > .hero-results-head-center) #panel-home .hero .hero-results-head {
        display: none !important;
    }

    html[data-mobile-home-chat-shell] .main:has(> .topbar > .hero-results-head-center) #panel-home .hero .hero-results-panel {
        padding-top: 0 !important;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero:not(:has(.hero-results:not([hidden]))) {
        padding-top: 0 !important;
        padding-inline: 0 !important;
    }

    /* 手机端：历史入口由 JS 移到顶栏右侧（与 header 同行） */
    html[data-mobile-home-chat-shell] .topbar .topbar-right .hero-empty-chat-history-btn.is-visible {
        position: static;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-primary);
        cursor: pointer;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
    }

    html[data-mobile-home-chat-shell] .topbar .topbar-right .hero-empty-chat-history-btn.is-visible svg {
        width: 16px;
        height: 16px;
        display: block;
        pointer-events: none;
        color: #000000;
    }

    /* 深色主题下黑色图标不可见，改用白色保持对比 */
    html[data-theme="dark"][data-mobile-home-chat-shell] .topbar .topbar-right .hero-empty-chat-history-btn.is-visible svg {
        color: #ffffff;
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-home-chat-shell] .topbar .topbar-right .hero-empty-chat-history-btn.is-visible svg {
            color: #ffffff;
        }
    }

    html[data-mobile-home-chat-shell] .topbar .topbar-right .hero-empty-chat-history-btn.is-visible:hover,
    html[data-mobile-home-chat-shell] .topbar .topbar-right .hero-empty-chat-history-btn.is-visible:focus-visible,
    html[data-mobile-home-chat-shell] .topbar .topbar-right .hero-empty-chat-history-btn.is-visible.is-menu-open {
        background: var(--bg-elev-2, #f2f2f2);
        color: var(--text-primary);
        outline: none;
    }

    /* 对话态：列表入口与「新建对话」同排在顶栏胶囊内（见 .topbar-chat-capsule），
       因此这里不再按「对话面板是否展开」隐藏；仅 [hidden] 时隐藏 */
    html[data-mobile-home-chat-shell] .topbar .topbar-right .hero-empty-chat-history-btn[hidden] {
        display: none !important;
    }

    /* 手机端：顶栏右上角「新建对话 + 对话列表」胶囊（对话区右上角，参考图样式）。
       有对话时左侧为新建对话（圆形按钮 + 加号），右侧为对话列表（三点）；
       无对话时只保留对话列表（新建对话隐藏）。桌面端该胶囊始终隐藏，对话列表按钮由 JS 放回 .hero。 */
    html[data-mobile-home-chat-shell] .topbar .topbar-right > .topbar-chat-capsule:not([hidden]) {
        position: static;
        display: inline-flex;
        align-items: center;
        gap: 0;
        height: 32px;
        padding: 0;
        /* 整体再右移 10px：抵消顶栏右侧内边距，胶囊更贴近屏幕右缘 */
        margin-right: -10px;
        border-radius: 999px;
        overflow: hidden;
    }

    html[data-mobile-home-chat-shell] .topbar .topbar-right > .topbar-chat-capsule[hidden] {
        display: none !important;
    }

    html[data-mobile-home-chat-shell] .topbar-chat-capsule > .topbar-chat-new-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        /* 圆形按钮：悬停/按下高光为正圆，与右侧「对话列表」圆钮一致 */
        border-radius: 50%;
        background: transparent;
        color: var(--text-primary);
        cursor: pointer;
        pointer-events: auto;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    html[data-mobile-home-chat-shell] .topbar-chat-capsule > .topbar-chat-new-btn svg {
        width: 20px;
        height: 20px;
        display: block;
        pointer-events: none;
    }

    /* 无对话时不显示「新建对话」（此时已是新对话状态），胶囊只剩「对话列表」 */
    html[data-mobile-home-chat-shell] .topbar-chat-capsule > .topbar-chat-new-btn[hidden] {
        display: none !important;
    }

    html[data-mobile-home-chat-shell] .topbar-chat-capsule > .topbar-chat-new-btn:hover,
    html[data-mobile-home-chat-shell] .topbar-chat-capsule > .topbar-chat-new-btn:focus-visible,
    html[data-mobile-home-chat-shell] .topbar-chat-capsule > .topbar-chat-new-btn:active {
        background: var(--glass-tint, rgba(0, 0, 0, 0.06));
    }

    /* 胶囊内：对话列表按钮不再单独画圆形底色，与新建按钮共用胶囊底 */
    html[data-mobile-home-chat-shell] .topbar .topbar-right > .topbar-chat-capsule .hero-empty-chat-history-btn.is-visible {
        background: transparent;
    }

    /* 胶囊内两个按钮的悬停/按下反馈：与新建按钮同一浅色高光 */
    html[data-mobile-home-chat-shell] .topbar .topbar-right > .topbar-chat-capsule .hero-empty-chat-history-btn.is-visible:hover,
    html[data-mobile-home-chat-shell] .topbar .topbar-right > .topbar-chat-capsule .hero-empty-chat-history-btn.is-visible:focus-visible,
    html[data-mobile-home-chat-shell] .topbar .topbar-right > .topbar-chat-capsule .hero-empty-chat-history-btn.is-visible:active,
    html[data-mobile-home-chat-shell] .topbar .topbar-right > .topbar-chat-capsule .hero-empty-chat-history-btn.is-visible.is-menu-open {
        background: var(--glass-tint, rgba(0, 0, 0, 0.06));
        outline: none;
    }

    /* ---------- 苹果风「玻璃按钮」：侧栏 Logo 圆钮 + 顶栏「新建对话/对话列表」胶囊 ----------
       半透明磨砂底（blur + saturate）+ 顶部高光内阴影 + 柔和投影，无描边边框；
       颜色统一走变量，深色主题在下方覆盖，light/dark 自适应。 */
    /* 去掉 --sidebar-head-h 带来的 min-height（36px），让 Logo 玻璃底为正方形（正圆） */
    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head,
    html[data-app-sidebar-mobile-rail]:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head {
        min-height: 0;
    }

    html:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head,
    html[data-app-sidebar-mobile-rail]:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head,
    html[data-mobile-home-chat-shell] .topbar .topbar-right > .topbar-chat-capsule:not([hidden]) {
        --glass-surface: color-mix(in srgb, var(--bg-base, #ffffff) 62%, transparent);
        --glass-surface-hi: color-mix(in srgb, var(--bg-base, #ffffff) 78%, transparent);
        --glass-edge: color-mix(in srgb, var(--bg-base, #ffffff) 92%, transparent);
        --glass-shade: color-mix(in srgb, var(--text-primary, #1a1523) 5%, transparent);
        --glass-drop-1: color-mix(in srgb, #000000 6%, transparent);
        --glass-drop-2: color-mix(in srgb, #000000 12%, transparent);
        --glass-tint: color-mix(in srgb, var(--text-primary, #1a1523) 8%, transparent);
        background: linear-gradient(180deg, var(--glass-surface-hi), var(--glass-surface));
        border: none;
        border-radius: 999px;
        box-shadow:
            inset 0 0.5px 0 var(--glass-edge),
            inset 0 -0.5px 0 var(--glass-shade),
            0 1px 2px var(--glass-drop-1),
            0 8px 20px var(--glass-drop-2);
        backdrop-filter: blur(16px) saturate(1.8);
        -webkit-backdrop-filter: blur(16px) saturate(1.8);
    }

    /* 深色主题：暗色磨砂玻璃（高光内阴影保留，投影加重），同样无描边 */
    html[data-theme="dark"]:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head,
    html[data-theme="dark"][data-app-sidebar-mobile-rail]:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head,
    html[data-theme="dark"][data-mobile-home-chat-shell] .topbar .topbar-right > .topbar-chat-capsule:not([hidden]) {
        --glass-surface: rgba(30, 30, 32, 0.62);
        --glass-surface-hi: rgba(48, 48, 52, 0.72);
        --glass-edge: rgba(255, 255, 255, 0.18);
        --glass-shade: rgba(0, 0, 0, 0.24);
        --glass-drop-1: rgba(0, 0, 0, 0.3);
        --glass-drop-2: rgba(0, 0, 0, 0.45);
        --glass-tint: rgba(255, 255, 255, 0.12);
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"]:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head,
        html[data-theme="system"][data-app-sidebar-mobile-rail]:not([data-workflow-active]) .app-sidebar.is-collapsed .app-sidebar-head,
        html[data-theme="system"][data-mobile-home-chat-shell] .topbar .topbar-right > .topbar-chat-capsule:not([hidden]) {
            --glass-surface: rgba(30, 30, 32, 0.62);
            --glass-surface-hi: rgba(48, 48, 52, 0.72);
            --glass-edge: rgba(255, 255, 255, 0.18);
            --glass-shade: rgba(0, 0, 0, 0.24);
            --glass-drop-1: rgba(0, 0, 0, 0.3);
            --glass-drop-2: rgba(0, 0, 0, 0.45);
            --glass-tint: rgba(255, 255, 255, 0.12);
        }
    }

    /* ========== 第 1842 轮（移动端）：Logo 圆钮 + 顶栏胶囊换成「和创作栏同一张玻璃」 ==========

       需求原话：「移动端：@div（div#app-sidebar-head 里的 Logo 圆钮）@div#topbar-chat-capsule
       去除阴影，背景色和毛玻璃透明度要和创作栏一致」。

       创作栏那套配方是第 1503 轮定的（见本文件「创作栏外观对齐下拉界面」那一段）：
       底色 --glass-surface-bg、磨砂 --glass-filter、无投影。上面第 952 轮那套「苹果风玻璃按钮」
       给这两颗胶囊另配了一份 —— 底色按 --bg-base 62% / 78% 混出来（比创作栏实，
       自定义页面底色下还偏黄）、磨砂 blur(16px) saturate(1.8)（比创作栏重）、
       外加两枚内高光 + 两枚外投影。这里整段换成与创作栏同一组 token，投影撤掉：
       用户在全站弹层外观里调透明度时，创作栏与这两颗一起跟着变。

       ⚠️ 权重：上面对应的两条是 (0,4,1) / (0,5,1)，这里是同权重靠位置取胜 —— 别往文件前面挪。
       ⚠️ hover / 按下用的 --glass-tint 仍然留在老那条里，不在这里覆盖。 */
    html[data-mobile-home-chat-shell] .app-sidebar.is-collapsed .app-sidebar-head,
    html[data-app-sidebar-mobile-rail] .app-sidebar.is-collapsed .app-sidebar-head,
    html[data-mobile-home-chat-shell] .topbar .topbar-right > .topbar-chat-capsule:not([hidden]) {
        background: var(--glass-surface-bg, var(--mobile-chat-glass-bg)) !important;
        box-shadow: none !important;
        backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
        -webkit-backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
    }

    /* 对话态：列表入口移到顶栏右侧（复用空态入口样式，与右侧头像同列） */
    html[data-mobile-home-chat-shell] .topbar .topbar-right > .hero-results-chat-history-btn:not([hidden]) {
        position: static;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-primary);
        cursor: pointer;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
    }

    /* 主页对话：列表入口由顶栏胶囊内的「对话列表」（三点）承担，
       独立的对话态入口只在工作流内嵌对话时保留 */
    html[data-mobile-home-chat-shell]:not([data-wf-chat-home-mounted]):not([data-wf-chat-open])
        .topbar
        .topbar-right
        > .hero-results-chat-history-btn:not([hidden]) {
        display: none !important;
    }

    html[data-mobile-home-chat-shell] .topbar .topbar-right > .hero-results-chat-history-btn:not([hidden]) svg {
        width: 16px;
        height: 16px;
        display: block;
        pointer-events: none;
        color: #000000;
    }

    /* 深色主题下黑色图标不可见，改用白色保持对比 */
    html[data-theme="dark"][data-mobile-home-chat-shell] .topbar .topbar-right > .hero-results-chat-history-btn:not([hidden]) svg {
        color: #ffffff;
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-home-chat-shell] .topbar .topbar-right > .hero-results-chat-history-btn:not([hidden]) svg {
            color: #ffffff;
        }
    }

    html[data-mobile-home-chat-shell] .topbar .topbar-right > .hero-results-chat-history-btn:not([hidden]):hover,
    html[data-mobile-home-chat-shell] .topbar .topbar-right > .hero-results-chat-history-btn:not([hidden]):focus-visible,
    html[data-mobile-home-chat-shell] .topbar .topbar-right > .hero-results-chat-history-btn:not([hidden]).is-menu-open {
        background: var(--bg-elev-2, #f2f2f2);
        color: var(--text-primary);
        outline: none;
    }

    html[data-mobile-home-chat-shell] #panel-home:has(.hero-results:not([hidden])) .hero,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) {
        display: flex !important;
        flex-direction: column !important;
        grid-template-rows: unset !important;
        align-content: stretch !important;
        position: fixed !important;
        /* 卡片纵向范围（默认与普通 sheet 一致：顶栏下沿 → 底部）。
           首页对话态由下方 --mobile-chat-card-* 改成 0 → 撑满全屏，
           这样顶部磨砂层才能盖在聊天内容上（iOS 导航栏效果）。 */
        top: var(--mobile-chat-card-top, var(--mobile-sheet-panel-top)) !important;
        right: 0 !important;
        bottom: var(--keyboard-inset, 0px) !important;
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: var(--mobile-chat-card-max-h, var(--mobile-sheet-panel-h)) !important;
        margin: 0 !important;
        /* 悬浮层（创作栏/免责声明/快捷标签）均 absolute 锚定 hero 底边，
           面板需贴满 sheet 到视口底，回到底部按钮与滚动让位才有统一基准 */
        padding: 0 !important;
        /* 同上面那张 sheet：底色跟主题色走（--bg-base），别再卡在面板色 90% 的玻璃上，
           否则用户改自定义主题色时首页的对话态纹丝不动。桌面端同一条对话态规则用的就是 var(--bg-base)。 */
        background: var(--bg-base, #fff) !important;
        box-shadow: var(--mobile-sheet-card-shadow) !important;
    }

    /* 首页对话态：卡片顶到屏幕最上沿、高度撑满，且不再需要 sheet 圆角
       （否则屏幕顶角会露出缺口） */
    html[data-mobile-home-chat-shell] #panel-home .hero:has(> .hero-results:not([hidden])) {
        --mobile-chat-card-top: 0px;
        --mobile-chat-card-max-h: none;
        border-radius: 0;
    }

    html[data-mobile-home-hero-minimized] #panel-home .hero {
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, 100%, 0) !important;
    }

    html[data-mobile-home-hero-minimized] .hero-mobile-fab,
    html[data-mobile-home-hero-fab-visible] .hero-mobile-fab {
        position: fixed;
        left: 0;
        right: 0;
        bottom: max(16px, calc(16px + var(--safe-bottom)));
        z-index: 350;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        margin: 0 auto;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: color-mix(in srgb, var(--mobile-sheet-surface-bg, var(--panel-surface-bg, #fdf8f8)) 70%, transparent);
        box-shadow: none;
        filter: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        animation: hero-mobile-fab-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }

    html[data-mobile-home-hero-minimized] .hero-mobile-fab[hidden],
    html[data-mobile-home-hero-fab-visible] .hero-mobile-fab[hidden] {
        display: none !important;
    }

    html[data-mobile-home-hero-fab-visible] .hero-mobile-fab:not([hidden]) {
        display: inline-flex !important;
    }

    /* 第 1486 轮（用户原话）：「打开侧边栏的时候不要显示」——
       侧边栏抽屉展开时那颗浮标会贴在抽屉右下角外面，看着像多长出来的；
       抽屉一关就按原逻辑回来（JS 里的 hidden / fab-visible 状态都不动）。 */
    /* 用 id 顶掉上面那条 `html[data-…-fab-visible] .hero-mobile-fab:not([hidden])`
       （0-3-1，同特异性时后面的 `!important` 才管用，这里直接压过去更稳）。 */
    html[data-app-sidebar-drawer-open] #hero-mobile-fab,
    html.is-mobile-sidebar-dragging-open #hero-mobile-fab {
        display: none !important;
    }

    html[data-mobile-home-hero-minimized] .hero-mobile-fab-icon,
    html[data-mobile-home-hero-fab-visible] .hero-mobile-fab-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
    }

    html[data-mobile-home-hero-minimized] .hero-mobile-fab-logo,
    html[data-mobile-home-hero-fab-visible] .hero-mobile-fab-logo {
        display: block;
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

    @keyframes hero-mobile-fab-in {
        from {
            transform: scale(0.72);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    html[data-theme="dark"][data-mobile-home-hero-minimized] .hero-mobile-fab,
    html[data-theme="dark"][data-mobile-home-hero-fab-visible] .hero-mobile-fab {
        box-shadow: none;
        filter: none;
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-home-hero-minimized] .hero-mobile-fab,
        html[data-theme="system"][data-mobile-home-hero-fab-visible] .hero-mobile-fab {
            box-shadow: none;
            filter: none;
        }
    }

    html[data-mobile-home-chat-shell] #panel-home .hero .hero-results-chat-history-btn {
        background: transparent;
        color: var(--text-secondary);
    }

    html[data-mobile-home-chat-shell] #panel-home .hero .hero-results-chat-history-btn:hover,
    html[data-mobile-home-chat-shell] #panel-home .hero .hero-results-chat-history-btn:focus,
    html[data-mobile-home-chat-shell] #panel-home .hero .hero-results-chat-history-btn:focus-visible,
    html[data-mobile-home-chat-shell] #panel-home .hero .hero-results-chat-history-btn:active,
    html[data-mobile-home-chat-shell] #panel-home .hero .hero-results-chat-history-btn.is-menu-open {
        background: var(--bg-elev-1);
        color: var(--text-primary);
    }

    html[data-mobile-home-chat-shell] #panel-home .hero .hero-results-open-chat {
        background: var(--mobile-sheet-group-bg, #fff);
        /* 黑色图标（深色主题下改白色保持对比） */
        color: #000000;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero .hero-results-open-chat:hover {
        background: color-mix(in srgb, var(--mobile-sheet-group-bg, #fff) 88%, #ffffff 12%);
        color: #000000;
    }

    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home .hero .hero-results-open-chat,
    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home .hero .hero-results-open-chat:hover {
        color: #ffffff;
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-home-chat-shell] #panel-home .hero .hero-results-open-chat,
        html[data-theme="system"][data-mobile-home-chat-shell] #panel-home .hero .hero-results-open-chat:hover {
            color: #ffffff;
        }
    }

    /* 分享改到对话列表下拉「新建对话」下方 */
    #hero-results-share-chat,
    html[data-mobile-home-chat-shell] #panel-home .hero .hero-results-head-actions {
        display: none !important;
    }

    /* 标题相对对话面板水平居中 */
    html[data-mobile-home-chat-shell] #panel-home .hero .hero-results-head {
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero .hero-results-head-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        flex: none;
        width: auto;
        max-width: calc(100% - 16px);
        min-width: 0;
        justify-content: center;
        height: auto;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero .hero-results-chat-title {
        flex: 0 1 auto;
        width: fit-content;
        max-width: 100%;
        min-width: 0;
        /* 左对齐：截断时从开头显示 */
        justify-content: flex-start;
        text-align: left;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero .hero-results-head-actions {
        margin-left: auto;
        flex-shrink: 0;
    }

    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home .hero .chip-dropdown-trigger,
    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home .hero .chip-dropdown-label,
    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home .hero .mention-trigger-btn,
    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home .hero .prompt-editable,
    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home .hero .prompt-input {
        color: var(--text-primary);
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-home-chat-shell] #panel-home .hero .chip-dropdown-trigger,
        html[data-theme="system"][data-mobile-home-chat-shell] #panel-home .hero .chip-dropdown-label,
        html[data-theme="system"][data-mobile-home-chat-shell] #panel-home .hero .mention-trigger-btn,
        html[data-theme="system"][data-mobile-home-chat-shell] #panel-home .hero .prompt-editable,
        html[data-theme="system"][data-mobile-home-chat-shell] #panel-home .hero .prompt-input {
            color: var(--text-primary);
        }
    }

    html[data-mobile-home-chat-shell] #panel-home:has(.hero-results:not([hidden])) .hero > .hero-results,
    html[data-mobile-home-chat-shell] #panel-home:has(.hero-results:not([hidden])) .hero > .quick-prompts {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
        box-sizing: border-box;
    }

    /* 有对话时创作栏：左右距 hero 各 10px（压过 width:100% / stretch） */
    html[data-mobile-home-chat-shell] #panel-home:has(.hero-results:not([hidden])) .hero > .prompt-box.is-prompt-expanded,
    html[data-mobile-home-chat-shell] #panel-home .home-split > .hero:has(> .hero-results:not([hidden])) > .prompt-box,
    html[data-mobile-home-chat-shell] #panel-home .home-split > .hero:has(> .hero-results:not([hidden])) > .prompt-box.is-prompt-expanded,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box.is-prompt-expanded {
        width: calc(100% - (var(--mobile-home-prompt-box-inset, 10px) * 2)) !important;
        max-width: calc(100% - (var(--mobile-home-prompt-box-inset, 10px) * 2)) !important;
        min-width: 0 !important;
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        box-sizing: border-box;
    }

    html[data-mobile-home-chat-shell] #panel-home:has(.hero-results:not([hidden])) .hero > .prompt-box.is-prompt-expanded {
        margin-top: 8px !important;
        margin-bottom: 0 !important;
        padding: 4px;
        border-radius: var(--wf-composer-radius, 40px) !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* 免责声明排在创作栏（order:3）之后，固定在创作栏下方 */
    html[data-mobile-home-chat-shell] #panel-home:has(.hero-results:not([hidden])) .hero > .hero-results-ai-disclaimer {
        display: block;
        position: static;
        transform: none;
        order: 4;
        flex: 0 0 auto;
        align-self: center;
        width: calc(100% - (var(--mobile-home-prompt-box-inset, 10px) * 2));
        max-width: calc(100% - (var(--mobile-home-prompt-box-inset, 10px) * 2));
        margin: 6px auto 4px;
        padding: 0 8px;
        box-sizing: border-box;
    }

    html[data-mobile-home-chat-shell] #panel-home:has(.hero-results:not([hidden])) .hero > .prompt-box.is-prompt-expanded .prompt-toolbar {
        width: 100%;
        padding-inline: 18px;
        box-sizing: border-box;
    }

    html[data-mobile-home-chat-shell] #panel-home:has(.hero-results:not([hidden])) .hero {
        display: flex !important;
        flex-direction: column !important;
        align-content: stretch !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        grid-template-rows: unset !important;
        gap: 0 !important;
        min-height: 0 !important;
        flex: none !important;
        max-height: var(--mobile-sheet-panel-h) !important;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero-content {
        order: -3;
        flex: 1 1 0%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        /* 移动端标题块与创作目标整体下移（第 1483 轮（需求）：「@div 下移 150px」——
           原 35px 再 +150px = 185px；创作目标跟随标题间距 65px 不变） */
        margin: 185px 0 0;
        padding: 0;
        gap: 0;
        border-radius: 0;
        overflow: hidden;
        box-shadow: none;
        background: transparent;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) {
        display: flex !important;
        flex-direction: column !important;
        flex: none !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: var(--mobile-chat-card-max-h, var(--mobile-sheet-panel-h)) !important;
        width: 100% !important;
        grid-template-rows: unset !important;
        grid-template-areas: unset !important;
    }

    html[data-mobile-home-chat-shell] #panel-home:has(.hero-results:not([hidden])) .hero > .hero-content {
        display: none !important;
    }

    /* 创作栏 + 快捷标签固定在页面底部，贴住网页底部。
       第 1503 轮（需求）：「@div（.prompt-box.is-prompt-expanded 创作栏）不显示阴影
       并且圆角再大一点」—— 原来这里 24px，本轮加到 28px（内层 chrome 圆角按「外壳 - 4px」
       一起重算）；阴影由后面第 1503 轮那段统一撤掉，这里不再给投影。 */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box {
        --wf-composer-radius: 28px;
        --hero-prompt-chrome-radius: calc(var(--wf-composer-radius) - 4px);
        --hero-prompt-box-shadow: none;
        border-radius: var(--wf-composer-radius, 28px);
        order: 3;
        margin: 0 auto !important;
        border: none !important;
        box-shadow: var(--hero-prompt-box-shadow) !important;
        /* 创作栏本身不是滚动容器：下滑应拖动弹层，而不是带动后面的网页/对话列表 */
        touch-action: none;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box :is(#prompt-input, textarea, [contenteditable="true"]) {
        touch-action: pan-y;
    }

    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box {
        --hero-prompt-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box {
            --hero-prompt-box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
        }
    }

    html[data-mobile-home-chat-shell] #panel-home .hero > .quick-prompts {
        order: 2;
    }

    /* 快捷标签隐藏时仍保证创作栏贴底 */
    html[data-mobile-home-chat-shell] #panel-home .hero:has(> .quick-prompts[hidden]) > .prompt-box {
        margin-top: auto !important;
    }

    /* ===== 移动端聊天：顶部顶栏 + 底部创作栏/免责声明均为悬浮磨砂层 =====
       hero 顶边延到屏幕顶（顶栏已有磨砂背景），聊天从顶栏后方穿过；
       底部栈脱离文档流悬浮于聊天之上，聊天从其后方隐约透出（同桌面顶栏处理） */
    html[data-mobile-home-chat-shell] #panel-home:has(.hero-results:not([hidden])) .hero {
        top: 0 !important;
        max-height: calc(100dvh - var(--keyboard-inset, 0px)) !important;
        /* 在 .hero 作用域重算顶部磨砂层高度：此处 --topbar-h 已等于顶栏实际高度，
           所以「顶栏 + 下方 15px 白色遮罩」能精确贴住顶栏下缘 */
        --mobile-chat-content-top: calc(var(--topbar-h, 52px) + var(--mobile-chat-top-fade-h, 15px));
    }

    /* 创作栏：悬浮贴底，磨砂半透明（底边落在免责声明顶边上） */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box {
        position: absolute !important;
        top: auto !important;
        left: var(--mobile-home-prompt-box-inset, 10px) !important;
        right: var(--mobile-home-prompt-box-inset, 10px) !important;
        bottom: calc(var(--safe-bottom, 0px) + var(--hero-disclaimer-stack, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        align-self: auto !important;
        margin: 0 !important;
        transform: none !important;
        /* 创作栏显示在顶层（高于免责声明 2 / 快捷标签 5），不被其他控件遮挡 */
        z-index: 10 !important;
        /* 磨砂参数与顶部导航栏共用（--mobile-chat-glass-*），两处观感一致 */
        background: var(--mobile-chat-glass-bg) !important;
        backdrop-filter: var(--mobile-chat-glass-filter);
        -webkit-backdrop-filter: var(--mobile-chat-glass-filter);
    }

    /* 免责声明（创作栏下方）：贴网页底边，宽度与创作栏一致，磨砂半透明，文字贴容器底部 */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .hero-results-ai-disclaimer {
        position: absolute !important;
        bottom: var(--safe-bottom, 0px) !important;
        left: var(--mobile-home-prompt-box-inset, 10px) !important;
        right: var(--mobile-home-prompt-box-inset, 10px) !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        height: 50px !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 14px 4px !important;
        transform: none !important;
        border-radius: 0;
        /* 免责声明在创作栏下层：z-index 低于创作栏（3） */
        z-index: 2;
        background: color-mix(in srgb, var(--bg-base) 45%, transparent) !important;
        backdrop-filter: blur(10px) saturate(1.5);
        -webkit-backdrop-filter: blur(10px) saturate(1.5);
    }

    /* 快捷标签：悬浮在创作栏正上方
       第 654 轮：胶囊整排搬到创作栏上边后，同样多让 46px（胶囊行 38 + 8 呼吸）。 */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .quick-prompts:not([hidden]) {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(var(--hero-prompt-dock-reserve, 180px) + 10px + var(--safe-bottom, 0px) + 46px) !important;
        margin: 0 !important;
        z-index: 5;
    }

    /* 回到底部：第 655 轮（需求）「@button#hero-chat-scroll-bottom 移到 @div(创作栏) 的右上方」——
       从「卡片正上方居中」挪到卡片右上角：左右与卡片同一条内缩线（10px，`translateX(-50%)`
       那套居中偏移一并去掉），顶边对齐上面那排胶囊的顶边
       —— 胶囊行 30 高（657 轮改成 28px 胶囊 + 2px 底内衬）：bottom = 免责声明 + 创作栏高 + 8 + 30 − 28 = +10。 */
    html[data-mobile-home-chat-shell] #panel-home .hero-results:not([hidden]) .hero-chat-scroll-bottom {
        left: auto;
        right: var(--mobile-home-prompt-box-inset, 10px);
        transform: none;
        bottom: calc(
            var(--safe-bottom, 0px)
                + var(--hero-disclaimer-stack, 0px)
                + var(--hero-prompt-h, 140px)
                + 10px
        );
    }

    /* 第 1806 轮：「创作栏隐藏（.is-composer-collapsed）时 @button#hero-chat-scroll-bottom
       会被遮挡一部分」——上面那条底边公式算的是「压在上面那排胶囊顶边」，
       可收起态免责声明 / 创作栏都归零，只剩 safe-bottom + 10px，圆钮正好掉进
       底部那条黑色横条（6～25px）里。收起态把它抬到横条上方。 */
    html[data-mobile-home-chat-shell] #panel-home .hero.is-composer-collapsed > #hero-results:not([hidden]) #hero-chat-scroll-bottom {
        bottom: calc(var(--safe-bottom, 0px) + 34px);
    }

    html[data-mobile-home-chat-shell] #panel-home .hero-results:not([hidden]) .hero-chat-scroll-bottom:hover {
        transform: translateY(1px);
    }

    /* 预设（快捷标签）打开时那条让位规则删了（第 655 轮）：
       圆钮挪到卡片右上角之后，预设行（底边 = 卡片上沿外 56px）跟圆钮（卡片上沿外 46 → 18px）
       压根不在一个高度带上，再抬反而会让圆钮跳位置。 */

    /* 聊天滚动体顶部让位顶部磨砂层（铺到 --mobile-chat-content-top），再留 8px 呼吸；
       底部让位由 .hero-results-body 的公共 calc（含 --safe-bottom）负责 */
    html[data-mobile-home-chat-shell] #panel-home .hero-results:not([hidden]) .hero-results-body,
    html[data-mobile-home-chat-shell] #panel-home .hero-results:not([hidden]) .hero-results-body--context.is-chat-scrollable {
        padding-top: var(--mobile-chat-content-top);
    }

    /* ---------- 对话态：顶部一整条磨砂「导航栏」铺在聊天之上（iOS 导航栏效果） ----------
       滚动区顶到屏幕最上沿（对话态 hero 的 top/max-height 见上方 sheet 定位规则），
       顶栏本身不再自带底色/模糊，改由这一整条磨砂层承担（参数与创作栏一致
       = --mobile-chat-glass-*），聊天记录与滚动条从它下方滚过时被轻微模糊地透出。 */

    /* 磨砂层：盖在聊天内容上方，从屏幕顶边一直铺到聊天内容顶边（含顶栏与卡片间的缝隙）；
       卡片被最小化（下滑成悬浮球）时 hero 不可见，这层也随之隐藏 */
    /* 第 1845 轮（需求，移动端）：「@header 下方的遮罩可以在偏好设置里开关，默认为关闭」。
       这里说的「遮罩」就是这条 `.hero::after` 磨砂带：它从屏幕顶边铺到聊天内容顶边、
       下缘 15px 渐隐，盖在聊天记录上方。挂 `html[data-mobile-topbar-mask]` 才画；
       不挂（默认）就不画 —— **顶栏自己的底色与磨砂不受影响**（用户第 1846 轮补的：
       「关闭之后应该只是关闭遮罩但是背景色和毛玻璃效果不要动」），
       所以下面「顶栏让位给磨砂带」那条也一并挂到同一个属性上。
       开关与存储见 01-bootstrap-gallery.js 的 getMobileTopbarMaskEnabled。 */
    html[data-mobile-topbar-mask][data-mobile-home-chat-shell]:not([data-mobile-home-hero-minimized])
        #panel-home:has(.hero-results:not([hidden]))
        .hero::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: var(--mobile-chat-content-top);
        z-index: 2;
        background: var(--mobile-chat-glass-bg);
        backdrop-filter: var(--mobile-chat-glass-filter);
        -webkit-backdrop-filter: var(--mobile-chat-glass-filter);
        /* 顶栏下缘那 15px 做「白色遮罩」：由顶栏底色渐隐到完全透明，
           聊天内容滚到这一带时平滑淡出，而不是被硬切一刀 */
        -webkit-mask-image: linear-gradient(
            to bottom,
            #000 0,
            #000 calc(100% - var(--mobile-chat-top-fade-h, 15px)),
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            #000 0,
            #000 calc(100% - var(--mobile-chat-top-fade-h, 15px)),
            transparent 100%
        );
        pointer-events: none;
    }

    /* 顶栏自身的底色/模糊交给上面那条磨砂层，避免两层叠加在衔接处出现色差；
       卡片最小化（悬浮球）时磨砂层不可见，顶栏恢复自己的玻璃底色。
       第 1845 轮（需求）：「顶栏遮罩关闭之后应该只是关闭遮罩但是背景色和毛玻璃效果不要动」——
       顶栏「让位」这条现在也只在开着遮罩（挂了 data-mobile-topbar-mask）时才生效：
       关掉遮罩时上面那条磨砂带不画，顶栏照旧保留自己的背景色与磨砂。 */
    html[data-mobile-topbar-mask][data-mobile-home-chat-shell]:not([data-mobile-home-hero-minimized])
        .main:has(#panel-home.is-active):has(.hero-results:not([hidden]))
        .topbar {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* 拖拽横杆区：对话态不再需要（卡片已铺满全屏、顶栏本身就是磨砂导航栏），直接隐藏；
       下滑最小化的手势仍可用（拖动逻辑绑定在 sheet 上，聊天内容区同样可触发），
       且 JS 会按需重建该节点（ensureMobileSheetDismissZone），所以用 CSS 隐藏而不是删 DOM */
    html[data-mobile-home-chat-shell]
        #panel-home:has(.hero-results:not([hidden]))
        .hero
        > .mobile-sheet-dismiss-zone {
        display: none !important;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero-results:not([hidden]),
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box {
        background: var(--hero-chat-surface-bg);
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box .prompt-input-wrap,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box .prompt-toolbar {
        background: transparent;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero-results:not([hidden]) {
        display: flex !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        margin: 0;
        padding: 0;
        border-radius: 0;
        overflow: hidden;
        box-sizing: border-box;
        box-shadow: none;
    }

    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home .hero-results:not([hidden]) {
        box-shadow: none;
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-home-chat-shell] #panel-home .hero-results:not([hidden]) {
            box-shadow: none;
        }
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box.is-prompt-expanded .prompt-input-wrap {
        padding-inline: 18px;
        padding-right: var(--home-prompt-resize-handle-gutter, 40px);
        box-sizing: border-box;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box.is-prompt-expanded > .prompt-input-wrap:has(#image-stack.has-images) {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        align-self: stretch;
        min-height: 0;
        height: auto;
        padding: 7px var(--home-prompt-resize-handle-gutter, 40px) 7px 18px;
        gap: 0;
        box-sizing: border-box;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > #image-stack.has-images {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: none;
        height: auto;
        min-height: 0;
        overflow: visible;
        align-self: center;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > #image-stack.has-images .image-stack-cards {
        flex: 0 1 auto;
        width: max-content;
        min-width: 0;
        max-width: 100%;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box.is-prompt-expanded #image-stack-cards > .stack-add-card {
        position: relative;
        flex: 0 0 auto;
        flex-shrink: 0;
        align-self: center;
        margin: 0;
        overflow: visible;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box.is-prompt-expanded:has(.image-stack.has-images) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box.is-prompt-expanded:has(.image-stack.has-images) > .prompt-input-wrap,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box.is-prompt-expanded:has(.image-stack.has-images) > .prompt-input-editor {
        background: transparent;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded .prompt-input-editor {
        border-radius: 0;
        box-sizing: border-box;
        box-shadow: none;
        border: none;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box.is-prompt-expanded .prompt-input-editor {
        margin-inline: auto;
        width: calc(100% - 6px);
        max-width: calc(100% - 6px);
        background: transparent;
        border: none;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #prompt-input,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded .prompt-editable {
        border-radius: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        box-sizing: border-box;
    }

    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #prompt-input,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded .prompt-editable {
        background: transparent;
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #prompt-input,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded .prompt-editable {
            background: transparent;
        }
    }

    html[data-mobile-home-chat-shell] #panel-home .hero-results[hidden] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        flex: 0 0 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box {
        flex: 0 0 auto;
        z-index: 2;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero > .hero-results {
        max-height: none !important;
        height: auto !important;
        min-height: 0 !important;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero > .quick-prompts[hidden] {
        display: none !important;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero > .quick-prompts:not([hidden]) {
        flex: 0 0 auto;
        position: static;
        width: 100%;
        max-width: 100%;
        margin: auto 0 15px;
        padding: 0 12px;
        justify-content: center;
        pointer-events: auto;
        box-sizing: border-box;
        isolation: isolate;
        z-index: 2;
    }

    /* 与电脑端一致：创作目标区紧随标题之后（距标题 65px），底边距快捷标签 20px */
    html[data-mobile-home-chat-shell] #panel-home .hero > .home-create-goals {
        order: -2;
        margin-top: 65px;
        margin-bottom: 20px;
        /* 目标卡是按钮：下滑应拖动弹层，不要把手势传给 hero 去滚网页 */
        touch-action: none;
    }

    /* 手机端首页（未进入对话）：创作栏永远留在可用区底部。
       作用同电脑端 42-ai-create.css 里的「短窗口下不压缩/裁切创作栏」：
       .hero 是 fixed + overflow-y:auto 的滚动容器，标题 / 创作目标比视口高时，
       原本会把排在最下面的创作栏顶到屏幕外（需要滚动才能看到输入框那一行）。
       给创作栏加 sticky 后，滚动只作用于上方内容，创作栏始终完整可见
       （视口够高时它本来就在底部，sticky 不生效，外观不变） */
    html[data-mobile-home-chat-shell] #panel-home .hero:not(:has(> .hero-results:not([hidden]))) > .prompt-box {
        position: sticky;
        bottom: 0;
        z-index: 3;
    }

    /* 极矮视口（开发者工具模拟小屏 / 分屏窄高窗口）：压缩标题与创作目标的顶部间距，
       让创作栏尽量靠自然布局就能容纳，减少 sticky 压住目标卡的情况。
       阈值取 620px：更常见的高度（iPhone SE 667）本就不会挤出创作栏，保持原间距不变 */
    @media (max-height: 620px) {
        html[data-mobile-home-chat-shell] #panel-home .hero:not(:has(> .hero-results:not([hidden]))) > .hero-content {
            margin-top: 14px;
        }

        html[data-mobile-home-chat-shell] #panel-home .hero:not(:has(> .hero-results:not([hidden]))) > .home-create-goals {
            margin-top: 26px;
            margin-bottom: 12px;
        }
    }

    /* 移动端：创作目标 6 卡分 2 行显示完（每行 3 个），关闭横向轮播 */
    html[data-mobile-home-chat-shell] #panel-home .hero > .home-create-goals .home-create-goals-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
        touch-action: auto;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero > .home-create-goals .home-goal-card {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero > .home-create-goals .home-goal-card:hover,
    html[data-mobile-home-chat-shell] #panel-home .hero > .home-create-goals .home-goal-card:focus,
    html[data-mobile-home-chat-shell] #panel-home .hero > .home-create-goals .home-goal-card:focus-visible,
    html[data-mobile-home-chat-shell] #panel-home .hero > .home-create-goals .home-goal-card:active {
        transform: none;
    }

    #home-create-goals .home-goal-play,
    html[data-mobile-home-chat-shell] #panel-home .hero > .home-create-goals .home-goal-play {
        /* 尺寸 / 位置跟桌面端一致（20px 小角标贴右上角），这里只补移动端要的可点性 */
        pointer-events: auto;
        z-index: 2;
    }

    #home-create-goals .home-goal-card.is-playing .home-goal-play,
    html[data-mobile-home-chat-shell] #panel-home .hero > .home-create-goals .home-goal-card.is-playing .home-goal-play {
        opacity: 1;
    }

    #home-create-goals .home-goal-card.is-playing .home-goal-play .home-goal-play-icon,
    html[data-mobile-home-chat-shell] #panel-home .hero > .home-create-goals .home-goal-card.is-playing .home-goal-play .home-goal-play-icon {
        display: none;
    }

    #home-create-goals .home-goal-card.is-playing .home-goal-play .home-goal-stop-icon,
    html[data-mobile-home-chat-shell] #panel-home .hero > .home-create-goals .home-goal-card.is-playing .home-goal-play .home-goal-stop-icon {
        display: block;
        margin-left: 0;
    }

    /* 移动端：创作目标区不再是通栏，宽度与创作栏（.prompt-box）对齐——
       左右各留 10px 内缩并居中。选择器带上 :not(:has(...)) 以压过 42-ai-create.css
       里同结构的 width/max-width:100% 基础规则（那边特异性更高且文件更晚加载） */
    html[data-mobile-home-chat-shell]
        #panel-home
        .hero:not(:has(.hero-results:not([hidden])))
        > .home-create-goals {
        width: calc(100% - (var(--mobile-home-prompt-box-inset, 10px) * 2));
        max-width: calc(100% - (var(--mobile-home-prompt-box-inset, 10px) * 2));
        align-self: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* 移动端 3 列卡片更窄（每卡约 137px），目标描述缩小到 8.5px 并在单行内完整显示；
       省略号保留为更窄屏幕（<430px）下的兜底 */
    html[data-mobile-home-chat-shell] #panel-home .hero > .home-create-goals .home-goal-desc {
        font-size: 8.5px;
        letter-spacing: -0.25px;
    }

    /* 移动端侧栏抽屉底部：头像 + 用户名靠左，通知 / 资产库 / 积分整体靠右。
       头像那一列吃掉全部剩余空间（1fr），后三项自动贴到最右侧 */
    html[data-app-sidebar-drawer-open][data-sidebar-footer-auth-docked]
        .app-sidebar:not(.is-collapsed)
        .app-sidebar-user-wrap-host:has(> #user-menu-wrap.is-sidebar-docked) {
        grid-template-columns: minmax(0, 1fr) auto auto auto;
    }

    html[data-app-sidebar-drawer-open][data-sidebar-footer-auth-docked]
        .app-sidebar:not(.is-collapsed)
        .app-sidebar-user-wrap-host
        > #user-menu-wrap.is-sidebar-docked,
    html[data-app-sidebar-drawer-open][data-sidebar-footer-auth-docked]
        .app-sidebar:not(.is-collapsed)
        .app-sidebar-user-wrap-host
        > #user-menu-wrap.is-sidebar-docked.is-points-hidden {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        justify-self: stretch;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        gap: 8px;
        padding: 0;
        border-radius: 8px;
    }

    html[data-app-sidebar-drawer-open][data-sidebar-footer-auth-docked]
        .app-sidebar-user-wrap-host
        > #user-menu-wrap.is-sidebar-docked
        > .user-menu-name {
        display: block;
        min-width: 0;
        flex: 1 1 auto;
        max-width: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--text-primary);
    }

    html[data-mobile-home-chat-shell] #panel-home .hero > .quick-prompts:not([hidden]) .quick-tags-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0;
        --quick-chip-bg: color-mix(in srgb, var(--bg-base, #ffffff) 72%, transparent);
        --quick-chip-bg-hover: color-mix(in srgb, var(--bg-base, #ffffff) 84%, transparent);
        --quick-chip-shadow: none;
        --quick-chip-shadow-hover: none;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero > .quick-prompts:not([hidden]) .quick-tags-row::-webkit-scrollbar {
        display: none;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero > .quick-prompts:not([hidden]) .quick-tags {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: auto;
        max-width: none;
        min-width: 0;
        overflow: hidden;
        isolation: isolate;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero > .quick-prompts:not([hidden]) .quick-tag-add {
        flex: 0 0 auto;
        margin-left: 0;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero .quick-prompts:not([hidden]) .quick-tag,
    html[data-mobile-home-chat-shell] #panel-home .hero .quick-prompts:not([hidden]) .quick-tag-add,
    html[data-mobile-home-chat-shell] #panel-home .hero.is-mobile-quick-prompts-docked .quick-prompts .quick-tag,
    html[data-mobile-home-chat-shell] #panel-home .hero.is-mobile-quick-prompts-docked .quick-prompts .quick-tag-add {
        -webkit-touch-callout: none;
        user-select: none;
        touch-action: manipulation;
        background: var(--quick-chip-bg);
        box-shadow: none !important;
        filter: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero .quick-prompts:not([hidden]) .quick-tag,
    html[data-mobile-home-chat-shell] #panel-home .hero .quick-prompts:not([hidden]) .quick-tag-add,
    html[data-mobile-home-chat-shell] #panel-home .hero.is-mobile-quick-prompts-docked .quick-prompts .quick-tag,
    html[data-mobile-home-chat-shell] #panel-home .hero.is-mobile-quick-prompts-docked .quick-prompts .quick-tag-add {
        min-height: 0;
        padding: 5px 12px;
        font-size: 12px;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero .quick-prompts:not([hidden]) .quick-tag:hover,
    html[data-mobile-home-chat-shell] #panel-home .hero .quick-prompts:not([hidden]) .quick-tag:focus-visible,
    html[data-mobile-home-chat-shell] #panel-home .hero .quick-prompts:not([hidden]) .quick-tag-add:hover,
    html[data-mobile-home-chat-shell] #panel-home .hero .quick-prompts:not([hidden]) .quick-tag-add:focus-visible,
    html[data-mobile-home-chat-shell] #panel-home .hero.is-mobile-quick-prompts-docked .quick-prompts .quick-tag:hover,
    html[data-mobile-home-chat-shell] #panel-home .hero.is-mobile-quick-prompts-docked .quick-prompts .quick-tag:focus-visible,
    html[data-mobile-home-chat-shell] #panel-home .hero.is-mobile-quick-prompts-docked .quick-prompts .quick-tag-add:hover,
    html[data-mobile-home-chat-shell] #panel-home .hero.is-mobile-quick-prompts-docked .quick-prompts .quick-tag-add:focus-visible {
        background: var(--quick-chip-bg-hover);
        box-shadow: none;
    }

    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home .hero > .quick-prompts:not([hidden]) .quick-tags-row {
        --quick-chip-bg: color-mix(in srgb, var(--bg-elev-1, #1e2020) 68%, transparent);
        --quick-chip-bg-hover: color-mix(in srgb, var(--bg-elev-1, #1e2020) 80%, transparent);
        --quick-chip-shadow: none;
        --quick-chip-shadow-hover: none;
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-home-chat-shell] #panel-home .hero > .quick-prompts:not([hidden]) .quick-tags-row {
            --quick-chip-bg: color-mix(in srgb, var(--bg-elev-1, #1e2020) 68%, transparent);
            --quick-chip-bg-hover: color-mix(in srgb, var(--bg-elev-1, #1e2020) 80%, transparent);
            --quick-chip-shadow: none;
            --quick-chip-shadow-hover: none;
        }
    }

    @media (prefers-color-scheme: light) {
        html[data-theme="system"][data-mobile-home-chat-shell] #panel-home .hero > .quick-prompts:not([hidden]) .quick-tags-row {
            --quick-chip-bg: color-mix(in srgb, var(--bg-base, #ffffff) 72%, transparent);
            --quick-chip-bg-hover: color-mix(in srgb, var(--bg-base, #ffffff) 84%, transparent);
            --quick-chip-shadow: none;
            --quick-chip-shadow-hover: none;
        }
    }

    html[data-mobile-home-chat-shell] #panel-home .hero > .quick-prompts:not([hidden]) .quick-tag-add {
        width: 28px;
        height: 28px;
        padding: 0;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .hero-content > .hero-title,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .hero-content > .hero-generate-visual {
        display: none !important;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero-generate-visual {
        display: none !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .hero-content {
        flex: 0 0 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        overflow: visible !important;
        width: 100%;
        max-width: min(990px, 100%);
        /* 移动端标题块与创作目标整体下移（第 1483 轮：35 → 185px，见上一处注释） */
        margin-top: 185px;
        padding: 0;
        gap: 0;
        transform: none;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .hero-content > .hero-title {
        flex: 0 0 auto;
        display: block;
        align-self: stretch;
        position: static;
        width: 100%;
        max-width: min(720px, 100%);
        min-height: 0;
        margin: 0;
        padding: 0 8px;
        text-align: center;
        /* 第 434 轮：跟着后台「首页标题 → 字号」走 —— 22px / 32px 相对基准 28px
           分别按 11/14、8/7 换算，后台没改字号时这条算出来还是 clamp(22px, 6vw, 32px)。 */
        font-size: clamp(
            calc(var(--site-hero-title-size, 28px) * 11 / 14),
            6vw,
            calc(var(--site-hero-title-size, 28px) * 8 / 7)
        );
        line-height: 1.3;
        pointer-events: none;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .hero-content > .hero-title .hero-title-line1,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .hero-content > .hero-title .hero-title-default {
        display: inline;
        white-space: normal;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero-results-panel {
        flex: 1 1 0%;
        min-width: 0;
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero-results-body,
    html[data-mobile-home-chat-shell] #panel-home .hero-results-body--context,
    html[data-mobile-home-chat-shell] #panel-home .hero-results-body--context.is-chat-scrollable {
        flex: 1 1 0%;
        align-self: stretch;
        width: auto;
        max-width: none;
        min-width: 0;
        min-height: 0;
        height: 100%;
        /* 右侧不留外边距，滚动条才能贴到网页最右缘；内容用内边距让位，
           保证聊天内容（.hero-results-chat）与创作栏（.prompt-box）同宽 */
        margin-left: var(--mobile-home-prompt-box-inset, 10px);
        margin-right: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: var(--mobile-home-prompt-box-inset, 10px);
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        box-sizing: border-box;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero-results-body--context:not(.is-chat-scrollable) {
        overflow-y: hidden;
        /* 未出现滚动条时也保留同样的内边距，避免聊天内容宽度在滚动条出现/消失时跳动 */
        padding-right: var(--mobile-home-prompt-box-inset, 10px);
        scrollbar-gutter: auto;
        scrollbar-width: none;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero-results-body::-webkit-scrollbar,
    html[data-mobile-home-chat-shell] #panel-home .hero-results-body--context.is-chat-scrollable::-webkit-scrollbar {
        width: 2px;
    }

    /* 创作类型：手机端始终以下拉框显示 */
    html[data-mobile-home-chat-shell] #panel-home .mode-nav-row > #mode-nav {
        display: none !important;
    }

    html[data-mobile-home-chat-shell] #panel-home .mode-nav-row.is-mode-nav-row-empty {
        display: none !important;
        margin: 0;
    }

    /* 组合芯片「类型 · 模型」启用时（移动端），隐藏单独的「类型」「模型」下拉：
       两者会被 dockPromptModeNav 从 .mode-nav-row 搬进 .prompt-toolbar-row，
       不再是 .prompt-options 的子节点 —— 旧的 `.prompt-options > #model-dropdown`
       选择器因此匹配不到，组合芯片旁边会多出一个重复的「只有模型」下拉 */
    html[data-home-mode-model-combo] #panel-home #mode-dropdown,
    html[data-home-mode-model-combo] #panel-home #model-dropdown {
        display: none !important;
    }

    html[data-mobile-home-chat-shell] #panel-home .prompt-toolbar .prompt-options {
        touch-action: auto;
    }

    html[data-mobile-home-chat-shell] #panel-home .prompt-toolbar .chip-dropdown,
    html[data-mobile-home-chat-shell] #panel-home .prompt-toolbar .chip-dropdown-trigger,
    html[data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo,
    html[data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown {
        touch-action: manipulation;
        pointer-events: auto;
    }

    html[data-home-mode-model-combo] #panel-home #mobile-mode-model-combo,
    html[data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo:not([hidden]) {
        display: block !important;
        flex-shrink: 0;
        width: auto;
        max-width: 100%;
        touch-action: manipulation;
    }

    html[data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo-trigger {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        width: auto;
        max-width: none;
        min-width: 0;
        /* 第 657 轮（需求，移动端）：「改成胶囊型，高度要和（回到底部圆钮里那个箭头）一致」——
           36 → 28（跟那颗 28px 圆钮同高，同一排齐平），圆角 8 → 999 变胶囊。
           第 658 轮（需求，移动端）：「去除边框」——基线 .chip 那条 1px 描边（--border-soft）去掉。 */
        height: 28px;
        padding: 0 12px;
        border: none;
        border-radius: 999px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        background-color: var(--hero-prompt-chip-bg, #fdf8f8);
        background-image: none !important;
        box-shadow: none;
        transition: color 0.15s ease, background-color 0.15s ease;
    }

    html[data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo-trigger:hover,
    html[data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo-trigger:focus-visible,
    html[data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo.is-open #mobile-mode-model-combo-trigger {
        background-color: var(--bg-elev-1);
        background-image: none !important;
    }

    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo-trigger,
    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo-trigger:hover,
    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo-trigger:focus-visible,
    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo.is-open #mobile-mode-model-combo-trigger {
        background-color: var(--hero-prompt-chip-bg, #272525);
        background-image: none !important;
    }

    html[data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo-trigger .chip-dropdown-label {
        flex: 0 1 auto;
        min-width: 0;
        max-width: none;
    }

    html[data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo-trigger .chip-chevron,
    html[data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown-trigger .chip-chevron {
        display: block;
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        color: var(--text-tertiary);
        transition: transform 0.2s ease;
    }

    html[data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo.is-open #mobile-mode-model-combo-trigger .chip-chevron,
    html[data-mobile-home-chat-shell] #panel-home #mobile-mode-model-combo-trigger[aria-expanded="true"] .chip-chevron,
    html[data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown.is-open #gen-settings-dropdown-trigger .chip-chevron,
    html[data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown-trigger[aria-expanded="true"] .chip-chevron {
        transform: rotate(180deg);
    }

    html[data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown {
        margin-left: 0;
    }

    html[data-theme="light"][data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown {
        margin-left: 0;
    }

    @media (prefers-color-scheme: light) {
        html[data-theme="system"][data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown {
            margin-left: 0;
        }
    }

    html[data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown-trigger {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        /* 第 657 轮（需求，移动端）：同上，36 → 28 + 胶囊圆角，和类型·模型那颗齐平。
           第 658 轮：同样去掉那条 1px 描边。 */
        height: 28px;
        padding: 0 12px;
        border: none;
        border-radius: 999px;
        background-color: var(--hero-prompt-chip-bg, #fdf8f8);
        background-image: none !important;
        box-shadow: none;
        transition: color 0.15s ease;
    }

    html[data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown-trigger:hover,
    html[data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown-trigger:focus-visible,
    html[data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown.is-open #gen-settings-dropdown-trigger {
        background-color: var(--bg-elev-1);
        background-image: none !important;
    }

    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown-trigger,
    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown-trigger:hover,
    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown-trigger:focus-visible,
    html[data-theme="dark"][data-mobile-home-chat-shell] #panel-home #gen-settings-dropdown.is-open #gen-settings-dropdown-trigger {
        background-color: var(--hero-prompt-chip-bg, #272525);
        background-image: none !important;
    }

    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #gen-settings-dropdown-trigger,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #gen-settings-dropdown-trigger:hover,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #gen-settings-dropdown-trigger:focus-visible,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #gen-settings-dropdown.is-open #gen-settings-dropdown-trigger {
        background-color: var(--hero-prompt-chip-bg, #272525);
        background-image: none !important;
        box-shadow: none;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #model-dropdown-trigger,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #model-dropdown-trigger:hover,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #model-dropdown-trigger:focus-visible,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #model-dropdown.is-open #model-dropdown-trigger,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo-trigger,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo-trigger:hover,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo-trigger:focus-visible,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo.is-open #mobile-mode-model-combo-trigger {
        background-color: var(--hero-prompt-chip-bg, #fdf8f8);
        background-image: none !important;
        box-shadow: none;
    }

    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo-trigger,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo-trigger:hover,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo-trigger:focus-visible,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo.is-open #mobile-mode-model-combo-trigger {
        background-color: var(--hero-prompt-chip-bg, #272525);
        background-image: none !important;
        box-shadow: none;
    }

    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mode-dropdown-trigger,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mode-dropdown-trigger:hover,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mode-dropdown-trigger:focus-visible,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mode-dropdown.is-open #mode-dropdown-trigger,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #model-dropdown-trigger,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #model-dropdown-trigger:hover,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #model-dropdown-trigger:focus-visible,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #model-dropdown.is-open #model-dropdown-trigger {
        background-color: var(--hero-prompt-chip-bg, #272525);
        background-image: none !important;
        box-shadow: none;
    }

    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #gen-settings-dropdown-trigger,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo-trigger,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #gen-settings-dropdown-trigger .chip-dropdown-label,
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo-trigger .chip-dropdown-label {
        color: var(--text-primary);
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #gen-settings-dropdown-trigger,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo-trigger,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #gen-settings-dropdown-trigger .chip-dropdown-label,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo-trigger .chip-dropdown-label {
            color: var(--text-primary);
        }

        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #gen-settings-dropdown-trigger,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #gen-settings-dropdown-trigger:hover,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #gen-settings-dropdown-trigger:focus-visible,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #gen-settings-dropdown.is-open #gen-settings-dropdown-trigger {
            background-color: var(--hero-prompt-chip-bg, #272525);
            background-image: none !important;
            box-shadow: none;
        }

        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo-trigger,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo-trigger:hover,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo-trigger:focus-visible,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mobile-mode-model-combo.is-open #mobile-mode-model-combo-trigger {
            background-color: var(--hero-prompt-chip-bg, #272525);
            background-image: none !important;
            box-shadow: none;
        }

        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mode-dropdown-trigger,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mode-dropdown-trigger:hover,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mode-dropdown-trigger:focus-visible,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #mode-dropdown.is-open #mode-dropdown-trigger,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #model-dropdown-trigger,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #model-dropdown-trigger:hover,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #model-dropdown-trigger:focus-visible,
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #model-dropdown.is-open #model-dropdown-trigger {
            background-color: var(--hero-prompt-chip-bg, #272525);
            background-image: none !important;
            box-shadow: none;
        }
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box).is-prompt-expanded > .prompt-box-resize-handle {
        display: flex;
        top: 10px;
        right: 10px;
        width: 22px;
        height: 22px;
        z-index: 50;
    }

    /* 第 658 轮（需求，移动端）：「@button#home-prompt-resize-handle 点击放大编辑后不显示」——
       进了「放大编辑」那两档就把这颗收掉。
       ⚠️ 第 1494 轮（需求）：「点击放大之后怎么没有显示恢复/缩小按钮」——
       「创作栏最大化」那一档要留着（当恢复键用，图标同时换成朝内那对），
       所以这里只保留「底部放大编辑面板」那一档。 */
    html[data-mobile-prompt-sheet-open="prompt-expand"] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box).is-prompt-expanded > .prompt-box-resize-handle {
        display: none;
    }

    /* 画质 / 模型 / 类型下拉：宽度与 prompt-toolbar 一致 */
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box):has(.chip-dropdown-gen-settings.is-open, .chip-dropdown-model.is-open, .chip-dropdown-mode.is-open, .chip-dropdown-mode-model-combo.is-open) {
        position: static;
        z-index: auto;
        overflow: visible;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box):has(.chip-dropdown-gen-settings.is-open, .chip-dropdown-model.is-open, .chip-dropdown-mode.is-open, .chip-dropdown-mode-model-combo.is-open) .prompt-toolbar {
        position: relative;
        z-index: 420;
        overflow: visible;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box):has(.chip-dropdown-gen-settings.is-open, .chip-dropdown-model.is-open, .chip-dropdown-mode.is-open, .chip-dropdown-mode-model-combo.is-open) .prompt-toolbar-row,
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box):has(.chip-dropdown-gen-settings.is-open, .chip-dropdown-model.is-open, .chip-dropdown-mode.is-open, .chip-dropdown-mode-model-combo.is-open) .prompt-options:not([data-mobile-composer-chips-out="1"]) {
        position: static;
        overflow: visible;
    }

    /* 第 654 轮（需求，移动端）：「@div（.prompt-options）移到创作栏的上方」——
       整排创作栏胶囊（类型·模型 / 参数 / 数量）由 JS 搬成 .prompt-box 的直接子节点
       并打上 data-mobile-composer-chips-out 标记，这里把它定位到卡片上沿外 8px、
       左右与卡片各留 13px（凑回原来 x=23 的视觉左缘）；电脑端没有这个标记，
       规则不命中，胶囊留在工具栏行里。 */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box > .prompt-options[data-mobile-composer-chips-out="1"] {
        position: absolute;
        left: 13px;
        /* 右缘让出「回到底部」圆钮那一格（28 + 8 呼吸）：它俩现在同一行，
           容器即使透明也别压在按钮上抢手势。
           第 1504 轮（需求）：「@button#hero-chat-scroll-bottom 没有显示情况下 @div（.prompt-options）
           宽度大一些」—— 从写死 49px 改成读变量，没有圆钮时退回 13px（见文件末尾第 1504 轮那段）。 */
        right: var(--mobile-chips-row-right, 49px);
        bottom: calc(100% + 8px);
        margin: 0;
        padding: 0 0 2px;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: auto;
        z-index: 2;
    }

    /* 第 660 轮（需求，移动端）：「@div#image-stack-group-wrap 移到 @div(.prompt-options) 上方显示」——
       分组那排（48 高）走的是基线那条 `bottom: calc(100% + 8px + clearance)`：底边贴在卡片上沿外 8px，
       跟上面那排胶囊（30 高、同样贴卡片上沿 8px，见上一条）落在**同一条带**里 ——
       两排底边同一条线，左半段整片叠在一起。这里把它再抬「胶囊行 30 + 8 呼吸」= 46px，
       改成胶囊行在上、分组那排在上上（两排各自都还贴着卡片上沿算，卡片长高长矮都跟手）。
       clearance 那项留着：桌面悬浮版式里预设标签条压在上面时的让位逻辑（06n）不受影响。 */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box > .image-stack-group-wrap {
        bottom: calc(100% + 8px + 30px + 8px + var(--stack-group-strip-clearance, 0px));
    }

    /* 第 654 轮：胶囊被搬成 `.prompt-box` 的直接子节点后要悬到卡片外，
       卡片自己那几条 `overflow: hidden`（`:has(.hero-results…)` / `is-prompt-panel-sized`
       那两套）会把它整条裁掉 —— 实机踩过：结果图那一屏里胶囊直接不见了。
       有胶囊停在外面时把裁切放开（只在这一种状态下，其它状态照旧裁）。 */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box:has(> .prompt-options[data-mobile-composer-chips-out="1"]) {
        overflow: visible !important;
    }

    /* 第 655 轮（需求，移动端）：「@label#image-stack-upload-label（参考区那颗 +）
       图标颜色改成黑色、显示背景色，然后移到 @div(.prompt-toolbar) 的左边」——
       手机端它由 06-prompt-media.js 停到工具栏最左边（打 data-mobile-composer-add-out 标记），
       这里负责外形：常显一层 idle 底色（--prompt-upload-idle-bg，跟那几颗操作键的悬停底色同源）
       ＋ 纯黑的「+」（原来那层是灰的，而且只在参考区里那一套选择器下才画得出）。
       电脑端没有这个标记，规则不命中。 */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box > .prompt-toolbar > #image-stack-upload-label[data-mobile-composer-add-out="1"]:not([hidden]) {
        position: relative;
        inset: auto;
        z-index: 6;
        display: block;
        flex: 0 0 auto;
        align-self: center;
        /* 第 657 轮（需求，移动端）：「按钮大一些」——22 → 28（跟同排那颗回到底部圆钮同高） */
        width: 28px;
        height: 28px;
        margin: 0 8px 0 0;
        border-radius: 999px;
        background: var(--prompt-upload-idle-bg, rgba(0, 0, 0, 0.04));
        --prompt-upload-plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box > .prompt-toolbar > #image-stack-upload-label[data-mobile-composer-add-out="1"]::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* 第 657 轮：图标跟着按钮一起放大（13 → 16） */
        width: 16px;
        height: 16px;
        background: var(--prompt-upload-plus-icon) center / contain no-repeat;
        pointer-events: none;
    }

    /* 深色主题下「+」反成白（黑底上看不见黑图标），跟站里 --text-primary 的口径一致 */
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box > .prompt-toolbar > #image-stack-upload-label[data-mobile-composer-add-out="1"] {
        --prompt-upload-plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box > .prompt-toolbar > #image-stack-upload-label[data-mobile-composer-add-out="1"] {
            --prompt-upload-plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
        }
    }

    /* 第 655 轮（需求，移动端）：「@button#prompt-optimize-btn /
       @button#prompt-quick-prompts-toggle / @button#prompt-input-clear
       移到 @span(.generate-btn-icon) 的左边」—— JS 把它们挂进发送键那一行
       （`.generate-btn-wrap`，积分胶囊之前），这里把原先由「锚在 .prompt-input-wrap
       上那批」给的显形 + 尺寸 + 间距补上，与电脑端 10-composer-send.css 那段同形。 */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-toolbar > .generate-btn-wrap > :is(.prompt-optimize-btn, .prompt-quick-prompts-toggle-btn, .prompt-input-clear-btn):not([hidden]) {
        position: relative;
        z-index: 6;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        align-self: center;
        width: 22px;
        height: 22px;
        margin: 0 8px 0 0;
        color: var(--text-primary, #000000);
    }

    /* 第 656 轮（需求，移动端）：「#composer-batch-switch 移到 #prompt-input-clear 的左边」——
       开关（06n 的 syncComposerBatchSwitchPlacement 把它挂到清空键之前）在这里补回
       原来锚在 `.prompt-input-wrap` 上那条的尺寸/对齐；基线那套 `margin: 0 0 0 auto`
       （把开关推向行尾）以及窄屏那套 `order: 8` 在这儿会把它顶到行中央，一并归零。 */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-toolbar > .generate-btn-wrap > #composer-batch-switch {
        position: relative;
        flex: 0 0 auto;
        align-self: center;
        order: 0;
        margin: 0 8px 0 0;
        z-index: 3;
    }

    /* 「生成数」（批量模式开着才露面）跟着开关一起过来，仍是紧挨它右边 6px —— 右边那 8px 交给清空键自带的。 */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-toolbar > .generate-btn-wrap > #composer-batch-rounds-field {
        order: 0;
        margin: 0 0 0 6px;
    }

    /* 第 656 轮（需求，移动端）：「@span(.ai-create-ref-add-halves) 隐藏」——
       参考区那张「+」卡片里对半切出来的「从资产库 / 从本地」两颗收掉（卡片和点按照旧）。 */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box .ai-create-ref-add-halves {
        display: none !important;
    }

    /* 第 657 轮（需求，移动端）：「@button（.ai-create-upload「添加参考」）隐藏」——
       卡片里那颗按钮也收掉（加参考统一走工具栏最左边那颗「+」），卡片只剩虚线壳。 */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box .ai-create-upload {
        display: none !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-gen-settings.is-open,
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-model.is-open,
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-mode.is-open,
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-mode-model-combo.is-open {
        position: static !important;
        z-index: auto;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-menu.is-mobile-toolbar-docked {
        padding: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        transform: none !important;
        box-sizing: border-box;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-panel-model,
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-panel-gen-settings {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border: none !important;
        box-sizing: border-box;
    }

    /* 时长滑块：手机端加粗轨道 + 竖向滑钮 */
    .gen-settings-section--duration .gen-settings-duration-control {
        gap: 12px;
        padding: 6px 0 4px;
        align-items: flex-start;
    }

    .gen-settings-section--duration .gen-settings-duration-slider-wrap {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 26px;
    }

    .gen-settings-section--duration .gen-settings-duration-slider {
        --slider-thumb-w: 10px;
        --slider-thumb-h: 26px;
        --slider-track-h: 14px;
        /* 第 949 轮（需求）：「@input 的选择色太浅太突出了要适配主题色」——
           手机端这两档也改读主题 token（浅色 #b6b6bc / 深色 12% 白），
           深色不再单独写一份 #8a8a90（那档亮得刺眼，且漏了 system 深色）。 */
        --slider-track: var(--gen-slider-track, #e0e0e5);
        --slider-fill: var(--gen-slider-fill, #a8a8ae);
    }

    .gen-settings-section--duration .gen-settings-duration-value {
        min-width: 56px;
        padding: 10px 12px;
        align-items: center;
        justify-content: center;
    }

    .gen-settings-section--duration .gen-settings-duration-value-num,
    .gen-settings-section--duration input.gen-settings-duration-value-num {
        font-size: 20px;
    }

    /* 手机端：类型+模型 / 生成设置 — 底部 sheet（样式参考资产库） */
    @keyframes mobile-prompt-sheet-in {
        from {
            transform: translate3d(0, 100%, 0);
        }
        to {
            transform: translate3d(0, 0, 0);
        }
    }

    .main:has(#panel-templates.is-active) #mobile-prompt-sheet-root,
    body:has(#panel-templates.is-active) > #mobile-mode-model-sheet-content {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    .mobile-prompt-sheet-root:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 10200;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        pointer-events: auto;
        padding-bottom: var(--keyboard-inset, 0px);
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-root:not([hidden]),
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-root:not([hidden]) {
        align-items: stretch;
        justify-content: flex-start;
    }

    .mobile-prompt-sheet-backdrop {
        position: absolute;
        inset: 0;
        margin: 0;
        padding: 0;
        border: none;
        background: var(--mobile-sheet-scrim-bg, rgba(0, 0, 0, 0.42));
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-prompt-sheet-card {
        --mobile-sheet-option-hover-bg: transparent;
        --mobile-sheet-option-active-bg: #e5e5ea;
        --mobile-sheet-option-active-fg: #1a1a1a;
        --mobile-sheet-option-active-desc: rgba(26, 21, 35, 0.55);
        --mobile-sheet-check-color: #000000;
        --mobile-sheet-chrome-h: 34px;
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: var(--mobile-sheet-panel-h);
        max-height: var(--mobile-sheet-panel-h);
        margin: 0;
        padding: 1px 0 0;
        border: none;
        border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0;
        background: var(--mobile-sheet-surface-bg);
        box-shadow: var(--mobile-sheet-card-shadow);
        overflow: hidden;
        overscroll-behavior: contain;
        box-sizing: border-box;
        will-change: transform;
        animation: mobile-prompt-sheet-in 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    }

    html[data-mobile-prompt-sheet-open="mode-model"],
    html[data-mobile-prompt-sheet-open="gen-settings"] {
        --mobile-sheet-group-bg: var(--mobile-sheet-surface-bg);
        --mobile-sheet-segment-bg: var(--mobile-sheet-surface-bg);
        --mobile-sheet-option-active-bg: rgba(0, 0, 0, 0.06);
        --mobile-sheet-option-active-fg: var(--text-primary);
        --mobile-sheet-option-active-desc: var(--text-secondary);
        --mobile-sheet-check-color: var(--text-primary);
        --mode-model-tab-inactive-bg: var(--filter-tabs-tab-bg);
        --mode-model-tab-inactive-color: var(--filter-tabs-tab-color);
        --mode-model-tab-active-bg: rgba(0, 0, 0, 0.06);
        --mode-model-tab-active-color: var(--filter-tabs-tab-active-color);
        --mode-model-tab-active-shadow: none;
        --mode-model-row-active-bg: rgba(0, 0, 0, 0.06);
        --mode-model-row-active-fg: var(--text-primary);
        --mode-model-row-active-desc: var(--text-secondary);
        --mode-model-row-inactive-desc: var(--text-muted);
    }

    html[data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"],
    html[data-theme="dark"][data-mobile-prompt-sheet-open="gen-settings"] {
        --mobile-sheet-option-active-bg: var(--user-menu-surface-card-bg, #202020);
        --mode-model-tab-inactive-bg: rgba(255, 255, 255, 0.08);
        --mode-model-tab-inactive-color: rgba(255, 255, 255, 0.72);
        --mode-model-tab-active-bg: rgba(255, 255, 255, 0.14);
        --mode-model-tab-active-color: #ffffff;
        --mode-model-tab-active-shadow: none;
        --mode-model-row-active-bg: rgba(255, 255, 255, 0.1);
        --mode-model-row-active-fg: #ffffff;
        --mode-model-row-active-desc: rgba(255, 255, 255, 0.72);
        --mode-model-row-inactive-desc: rgba(255, 255, 255, 0.5);
    }

    html[data-theme="light"][data-mobile-prompt-sheet-open="mode-model"],
    html[data-theme="light"][data-mobile-prompt-sheet-open="gen-settings"] {
        --mobile-sheet-option-active-bg: rgba(0, 0, 0, 0.06);
        --mode-model-tab-inactive-bg: rgba(0, 0, 0, 0.06);
        --mode-model-tab-inactive-color: rgba(26, 21, 35, 0.72);
        --mode-model-tab-active-bg: rgba(0, 0, 0, 0.06);
        --mode-model-tab-active-color: #1a1523;
        --mode-model-tab-active-shadow: none;
        --mode-model-row-active-bg: rgba(0, 0, 0, 0.06);
        --mode-model-row-active-fg: var(--text-primary);
        --mode-model-row-active-desc: var(--text-secondary);
        --mode-model-row-inactive-desc: var(--text-muted);
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-prompt-sheet-open="mode-model"],
        html[data-theme="system"][data-mobile-prompt-sheet-open="gen-settings"] {
            --mobile-sheet-option-active-bg: var(--user-menu-surface-card-bg, #202020);
            --mode-model-tab-inactive-bg: rgba(255, 255, 255, 0.08);
            --mode-model-tab-inactive-color: rgba(255, 255, 255, 0.72);
            --mode-model-tab-active-bg: rgba(255, 255, 255, 0.14);
            --mode-model-tab-active-color: #ffffff;
            --mode-model-tab-active-shadow: none;
            --mode-model-row-active-bg: rgba(255, 255, 255, 0.1);
            --mode-model-row-active-fg: #ffffff;
            --mode-model-row-active-desc: rgba(255, 255, 255, 0.72);
            --mode-model-row-inactive-desc: rgba(255, 255, 255, 0.5);
        }
    }

    @media (prefers-color-scheme: light) {
        html[data-theme="system"][data-mobile-prompt-sheet-open="mode-model"],
        html[data-theme="system"][data-mobile-prompt-sheet-open="gen-settings"] {
            --mobile-sheet-option-active-bg: rgba(0, 0, 0, 0.06);
            --mode-model-tab-inactive-bg: rgba(0, 0, 0, 0.06);
            --mode-model-tab-inactive-color: rgba(26, 21, 35, 0.72);
            --mode-model-tab-active-bg: rgba(0, 0, 0, 0.06);
            --mode-model-tab-active-color: #1a1523;
            --mode-model-tab-active-shadow: none;
            --mode-model-row-active-bg: rgba(0, 0, 0, 0.06);
            --mode-model-row-active-fg: var(--text-primary);
            --mode-model-row-active-desc: var(--text-secondary);
            --mode-model-row-inactive-desc: var(--text-muted);
        }
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-card,
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-card,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-card,
    html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-card {
        position: fixed;
        /* 仅锚定底部，高度随内容自适应（向上生长，max-height 封顶） */
        top: auto !important;
        right: 0 !important;
        bottom: var(--keyboard-inset, 0px) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto;
        min-height: 0;
        max-height: var(--mobile-sheet-panel-h);
        margin: 0 !important;
        flex: none;
        transform: none;
        box-sizing: border-box;
        /* 卡片底色跟随主题（--bg-base 随 data-theme / 系统主题切换） */
        background: var(--bg-base, #f2f2f4) !important;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-card,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-card {
        /* 高度随内容自适应，最大不超过 65dvh；切换类型不跳动 */
        height: auto;
        max-height: min(65dvh, var(--mobile-sheet-panel-h));
        /* 「类型·模型」与「生成设置」两个弹层至少占屏幕高度的 3/5：
           内容少（如文生文只有类型+模型）时也不再是矮矮一条。
           与 --mobile-sheet-panel-h 取小值，避免极矮视口下顶破可用高度 */
        min-height: min(60dvh, var(--mobile-sheet-panel-h));
    }

    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-card,
    html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-card {
        /* 「生成设置」弹层同样最低 3/5 屏高（与类型·模型一致） */
        min-height: min(60dvh, var(--mobile-sheet-panel-h));
    }

    /* ========== 第 1844 → 1847 轮（移动端）：类型·模型 / 生成设置弹层的底色 ==========

       第 1844 轮按需求先换成了「和预设面板同一张玻璃」（--glass-surface-bg + 磨砂），
       第 1847 轮用户改口：「@button#mobile-mode-model-combo-trigger @button#gen-settings-dropdown-trigger
       的界面背景色改成白色」—— 弹层本体回到不透明的弹层表面色（浅色即纯白 / 深色 #121212），
       并关掉磨砂与投影（不透明底上那层 blur 只是白烧算力）。
       里层沿用弹层表面色（第 1486 轮那套），只有「类型」那排分段留 6% 墨色薄底，
       免得白底上白轨道看不见。 */
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-card,
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-card,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-card,
    html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-card {
        --mobile-sheet-surface-bg: var(--panel-surface-bg, #ffffff);
        --mobile-sheet-group-bg: var(--panel-surface-bg, #ffffff);
        --mobile-sheet-segment-bg: color-mix(in srgb, var(--text-primary, #1a1523) 6%, transparent);
        background: var(--mobile-sheet-surface-bg, #ffffff) !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .mobile-prompt-sheet-head {
        display: none !important;
    }

    .mobile-prompt-sheet-title {
        margin: 0;
        padding: 0 48px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        text-align: center;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-prompt-sheet-back {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-prompt-sheet-back svg {
        width: 20px;
        height: 20px;
    }

    .mobile-prompt-sheet-back:hover,
    .mobile-prompt-sheet-back:focus-visible {
        background: var(--bg-elev-3);
        color: var(--text-primary);
        transform: translate(-1px, -50%);
    }

    .mobile-prompt-sheet-back:focus,
    .mobile-prompt-sheet-back:focus-visible {
        outline: none;
        box-shadow: none;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-body,
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body,
    html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body {
        flex: 1 1 auto;
        align-self: stretch;
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        min-width: 0 !important;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        /* --mobile-sheet-surface-bg 在各主题下都已经有正确取值
           （深色 #121212 / 浅色 #fff / 跟随系统各一份），
           所以这里直接用 token，不再按主题各写一条覆盖。 */
        background: var(--mobile-sheet-surface-bg, #ffffff);
        border-radius: 28px;
        margin: 0 12px max(12px, var(--safe-bottom)) !important;
        padding: 10px 12px 12px;
        box-sizing: border-box;
    }

    /* 类型·模型：body 容器停止整体滚动，由内部模型列表独立滚动，类型选择区固定 */
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-body,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body {
        overflow: hidden;
    }

    /* 第 633 轮（用户反馈）：「@button（单图 / 套图）点击后 @div#mobile-prompt-sheet-body 要可以
       滑动，不然 @div（.gen-settings-image-set）显示不全」——
       套图那套「选择模块」网格高约 950px，整张参数表 1461px。真正该滚的是下面那层
       `.gen-settings-sections`（`overflow-y: auto`），可它上面还压着两层 `display: block`
       ＋高度自适应（`.chip-dropdown-menu` / `.chip-dropdown-panel-gen-settings`），没人给它
       一个确定高度 ⇒ 它整段撑到 1461、`overflow-y: auto` 永不触发（实测量到
       scrollHeight == clientHeight），超出外壳 662 的部分被 body 的 `overflow: hidden` 裁掉。
       更麻烦的是整条滚动链就断在这一层上 —— 它是「可滚但没得滚」的容器，手指 / 滚轮
       的落点被它接住、量出滚动量 0，于是既滚不动也传不到外层（实测把 body 改成
       `overflow-y: auto` 也没用）。
       这里照「类型·模型」那张表（body > #mobile-mode-model-sheet-content）的做法，
       把这两层也串成 flex 列、允许收缩，sections 拿到确定高度（377 宽下 584 高）后
       滚动就回来了：套图模式能一路滑到最后一张「活动福利图」，中途下滑是滚列表、
       滚到头再下滑才是关弹层（`getMobileSheetVerticalScrollContainer` 认的就是这一层）。 */
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .chip-dropdown-menu.is-mobile-prompt-bottom-sheet-content,
    html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body .chip-dropdown-menu.is-mobile-prompt-bottom-sheet-content,
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .chip-dropdown-panel-gen-settings,
    html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body .chip-dropdown-panel-gen-settings {
        /* 上面那条 `.mobile-prompt-sheet-body .chip-dropdown-menu { display: block !important }`
           得压过去，光靠特异性不够。 */
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-body > #mobile-mode-model-sheet-content,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body > #mobile-mode-model-sheet-content,
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-body > #wf-mode-model-sheet-content,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body > #wf-mode-model-sheet-content {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-top: 28px;
    }

    /* 类型选择区固定不滚动 */
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-card-group-mode {
        flex: 0 0 auto;
    }

    /* 模型列表独立滚动 */
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-card-group-model {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* 深色弹层内容区：用「弹层表面色」而不是「用户菜单卡片色」。
       header 横杆条带是 rgba(18,18,18,0.72) 磨砂叠在卡片 #121212 上 —— 合出来就是 #121212，
       卡片本身也是 --mobile-sheet-surface-bg（#121212）。
       这里原来写的是 --user-menu-surface-card-bg（#202020，借的用户菜单那套「抬升卡片」色），
       于是整个内容区比 header 亮一档，顶上一条明显色带。
       浅色下两个 token 都是 #fff，看不出来，所以只在深色暴露。 */
    html[data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-body,
    html[data-theme="dark"][data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body,
    html[data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body,
    html[data-theme="dark"][data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body {
        background: var(--mobile-sheet-surface-bg, #121212);
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-body,
        html[data-theme="system"][data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body,
        html[data-theme="system"][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body,
        html[data-theme="system"][data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body {
            background: var(--mobile-sheet-surface-bg, #121212);
        }
    }

    @media (prefers-color-scheme: light) {
        html[data-theme="system"][data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-body,
        html[data-theme="system"][data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body,
        html[data-theme="system"][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body,
        html[data-theme="system"][data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body {
            background: var(--mobile-sheet-surface-bg, #fff);
        }
    }

    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body {
        padding: 10px 12px max(16px, calc(12px + var(--safe-bottom)));
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-body > #mobile-mode-model-sheet-content,
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-body > #wf-mode-model-sheet-content,
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .chip-dropdown-menu.is-mobile-prompt-bottom-sheet-content,
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .chip-dropdown-panel-gen-settings,
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .gen-settings-sections,
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .gen-settings-section,
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .gen-settings-section-options,
    html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body .chip-dropdown-menu,
    html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body .chip-dropdown-panel-gen-settings,
    html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-sections,
    html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section,
    html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    html[data-mobile-prompt-sheet-open="prompt-expand"] .mobile-prompt-sheet-card {
        height: min(78vh, 640px, calc(100dvh - var(--keyboard-inset, 0px) - var(--topbar-h, 52px)));
        max-height: min(78vh, 640px, calc(100dvh - var(--keyboard-inset, 0px) - var(--topbar-h, 52px)));
    }

    html[data-mobile-prompt-sheet-open="prompt-expand"] .mobile-prompt-sheet-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 8px 16px 20px;
        box-sizing: border-box;
    }

    .mobile-prompt-expand-sheet-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        width: 100%;
    }

    .mobile-prompt-expand-editor {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        height: auto;
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding: 12px 14px 20px;
        border-radius: 16px;
        background: var(--hero-chat-surface-bg, var(--panel-surface-bg));
        border: 1px solid var(--hero-prompt-chrome-border, rgba(0, 0, 0, 0.08));
        box-sizing: border-box;
        outline: none;
    }

    .mobile-prompt-expand-editor:empty::before {
        content: attr(data-placeholder);
        color: var(--text-muted);
        pointer-events: none;
    }

    html[data-mobile-prompt-sheet-open="prompt-expand"] .mobile-prompt-sheet-card.is-dragging .mobile-prompt-expand-editor {
        pointer-events: none;
    }

    [data-theme="dark"] .mobile-prompt-sheet-card {
        --mobile-sheet-option-hover-bg: transparent;
        --mobile-sheet-option-active-bg: #ffffff;
        --mobile-sheet-option-active-fg: #1a1a1a;
        --mobile-sheet-option-active-desc: rgba(26, 21, 35, 0.55);
        --mobile-sheet-check-color: #000000;
    }

    @media (prefers-color-scheme: dark) {
        [data-theme="system"] .mobile-prompt-sheet-card {
            --mobile-sheet-option-hover-bg: transparent;
            --mobile-sheet-option-active-bg: #ffffff;
            --mobile-sheet-option-active-fg: #1a1a1a;
            --mobile-sheet-option-active-desc: rgba(26, 21, 35, 0.55);
            --mobile-sheet-check-color: #000000;
        }
    }

    .mobile-prompt-sheet-card.is-dismissing {
        transition: transform 0.22s ease;
    }

    .mobile-prompt-sheet-body {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        padding: 8px 16px max(16px, calc(12px + var(--safe-bottom)));
        box-sizing: border-box;
        background: var(--mobile-sheet-surface-bg, #fdf8f8);
    }

    .mobile-prompt-sheet-card.is-dragging .mobile-prompt-sheet-body {
        overflow-y: hidden;
        touch-action: none;
    }

    /* 弹层 header（横杆条带）半透明磨砂：悬浮于内容之上，滚动内容从磨砂条下方穿过 */
    .mobile-prompt-sheet-card > .mobile-sheet-dismiss-zone {
        flex: 0 0 auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.72);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        backdrop-filter: blur(18px) saturate(1.4);
    }

    /* 第 1847 轮（需求）：「@div（.mobile-sheet-dismiss-zone）显示白色顶边框然后背景色白色」——
       卡片是白底之后，这条 56px 抓取区也吃同一个表面色（浅色纯白），并在最上沿画一道 1px 白边
       （弹层顶边与外面那层暗遮罩之间留一条干净的亮边）；不透明底上磨砂没意义，一并关掉。 */
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-card > .mobile-sheet-dismiss-zone,
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-card > .mobile-sheet-dismiss-zone {
        background: var(--mobile-sheet-surface-bg, #ffffff);
        border-top: 1px solid #ffffff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    html[data-theme="dark"] .mobile-prompt-sheet-card > .mobile-sheet-dismiss-zone {
        background: rgba(18, 18, 18, 0.72);
    }

    html[data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-card > .mobile-sheet-dismiss-zone,
    html[data-theme="dark"][data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-card > .mobile-sheet-dismiss-zone {
        background: var(--mobile-sheet-surface-bg, #121212);
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"] .mobile-prompt-sheet-card > .mobile-sheet-dismiss-zone {
            background: rgba(18, 18, 18, 0.72);
        }

        html[data-theme="system"][data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-card > .mobile-sheet-dismiss-zone,
        html[data-theme="system"][data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-card > .mobile-sheet-dismiss-zone {
            background: var(--mobile-sheet-surface-bg, #ffffff);
        }
    }

    /* 内容区顶部让出 header 高度，滚动时内容从半透明磨砂条下方穿过 */
    .mobile-prompt-sheet-card > .mobile-prompt-sheet-body {
        padding-top: calc(var(--mobile-sheet-dismiss-zone-h, 56px) + 8px);
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-body,
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body,
    html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body {
        padding-top: calc(var(--mobile-sheet-dismiss-zone-h, 56px) + 10px);
    }

    /* 创作弹层卡片顶部显示小横杆（覆盖全局 .mobile-sheet-handle 的 display:none） */
    .mobile-prompt-sheet-card .mobile-sheet-dismiss-zone .mobile-sheet-handle {
        display: block !important;
        flex: 0 0 auto;
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.16);
    }

    html[data-theme="dark"] .mobile-prompt-sheet-card .mobile-sheet-dismiss-zone .mobile-sheet-handle {
        background: rgba(255, 255, 255, 0.24) !important;
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"] .mobile-prompt-sheet-card .mobile-sheet-dismiss-zone .mobile-sheet-handle {
            background: rgba(255, 255, 255, 0.24) !important;
        }
    }

    .mobile-prompt-sheet-body .chip-dropdown-menu.is-mobile-prompt-bottom-sheet-content,
    .mobile-prompt-sheet-body .chip-dropdown-panel-gen-settings,
    .mobile-prompt-sheet-body .gen-settings-sections,
    .mobile-prompt-sheet-body #mobile-mode-model-sheet-content,
    .mobile-prompt-sheet-body #wf-mode-model-sheet-content {
        min-height: 0;
        max-height: none;
    }

    .mobile-prompt-sheet-body .chip-dropdown-menu.is-mobile-prompt-bottom-sheet-content,
    .mobile-prompt-sheet-body .chip-dropdown-panel-gen-settings,
    .mobile-prompt-sheet-body .gen-settings-sections {
        height: auto;
    }

    .mobile-prompt-sheet-body:has(> #mobile-mode-model-sheet-content),
    .mobile-prompt-sheet-body:has(> #wf-mode-model-sheet-content) {
        display: flex;
        flex-direction: column;
        padding-bottom: 20px;
    }

    .mobile-prompt-sheet-body > #mobile-mode-model-sheet-content,
    .mobile-prompt-sheet-body > #wf-mode-model-sheet-content {
        flex: 0 0 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-mode-model {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-top: 0;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-body:has(> #mobile-mode-model-sheet-content),
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-body:has(> #wf-mode-model-sheet-content) {
        padding: 10px 12px max(12px, calc(12px + var(--safe-bottom)));
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-card-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-card-group-title {
        margin: 0;
        padding: 0 6px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-surface-card {
        border: none;
        border-radius: 28px;
        /* 用弹层表面色，和 header 横杆条带一致（深色下两者原来差一档） */
        background: var(--mobile-sheet-surface-bg, #fff);
        box-shadow: none;
        overflow: hidden;
        box-sizing: border-box;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode.mobile-prompt-sheet-surface-card {
        flex: 0 0 auto;
        padding: 8px;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model.mobile-prompt-sheet-surface-card {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding-block: 4px;
        padding-inline: 0;
        border-radius: 0;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mobile-prompt-sheet-mode-track,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .chip-dropdown-options-mode {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--filter-tabs-tab-gap, 6px);
        margin: 0;
        width: 100%;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-sizing: border-box;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option {
        flex: 1 1 0;
        min-width: 0;
        min-height: var(--filter-tabs-tab-height, 30px);
        padding: 0 var(--filter-tabs-tab-padding-x, 12px);
        border: none;
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        background: transparent !important;
        color: var(--text-secondary) !important;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option:not(.is-active):hover,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option:not(.is-active):focus,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option:not(.is-active):focus-visible,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option:not(.is-active):active {
        background: transparent !important;
        color: var(--text-secondary) !important;
        box-shadow: none;
        outline: none;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option .model-select-option-title {
        justify-content: center;
        text-align: center;
        width: 100%;
        font-size: var(--filter-tabs-tab-font-size, 13px);
        font-weight: 500;
        color: inherit;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option.is-active,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option.is-active:hover,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option.is-active:focus,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option.is-active:focus-visible,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option.is-active:active,
    html[data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option.is-active,
    html[data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option.is-active:hover,
    html[data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option.is-active:focus,
    html[data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option.is-active:focus-visible,
    html[data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option.is-active:active {
        background: var(--mode-model-tab-active-bg) !important;
        background-image: none !important;
        color: var(--mode-model-tab-active-color) !important;
        font-weight: 600;
        box-shadow: var(--mode-model-tab-active-shadow, none);
        outline: none;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-mode .mode-select-option.is-active .model-select-option-title {
        background: none !important;
        background-image: none !important;
        -webkit-background-clip: unset;
        background-clip: unset;
        -webkit-text-fill-color: unset;
        color: inherit;
        font-weight: 600;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .chip-dropdown-options,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model #mobile-sheet-model-options,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model #wf-sheet-model-options,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .chip-dropdown-options-model {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        /* 模型项之间留间隔：原来 gap:0，52px 的胶囊紧贴在一起像一整块。
           电脑端同为 6px（.chip-dropdown-options-model），取值保持一致 */
        gap: 6px;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .chip-dropdown-options,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model #mobile-sheet-model-options,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model #wf-sheet-model-options,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .chip-dropdown-options-model {
        &::-webkit-scrollbar {
            width: 1.5px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        &::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.18);
            border-radius: 2px;
        }
        &::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
        }
    }

    html[data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .chip-dropdown-options,
    html[data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model #mobile-sheet-model-options,
    html[data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model #wf-sheet-model-options,
    html[data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .chip-dropdown-options-model {
        scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
        &::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.22);
        }
        &::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.38);
        }
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .model-select-option {
        position: relative;
        margin-inline: 0;
        width: 100%;
        min-height: var(--user-menu-nav-row-h, 44px);
        padding: 8px 10px;
        border: none;
        border-radius: 12px;
        background: transparent;
        color: var(--text-primary);
        box-sizing: border-box;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .model-select-option:not(.is-active):hover,
    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .model-select-option:not(.is-active):focus-visible {
        background: transparent;
        outline: none;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .model-select-option .model-select-option-title {
        color: var(--text-primary);
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .model-select-option .model-select-option-desc {
        color: var(--mode-model-row-inactive-desc, var(--text-muted));
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .model-select-option.is-active {
        background: var(--mode-model-row-active-bg, rgba(0, 0, 0, 0.06)) !important;
        background-image: none !important;
        color: var(--mode-model-row-active-fg, var(--text-primary));
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .model-select-option.is-active .model-select-option-title {
        background: none !important;
        background-image: none !important;
        -webkit-background-clip: unset;
        background-clip: unset;
        -webkit-text-fill-color: unset;
        color: var(--mode-model-row-active-fg, var(--text-primary));
        font-weight: 600;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .model-select-option.is-active .model-select-option-desc {
        color: var(--mode-model-row-inactive-desc, var(--text-muted));
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .chip-dropdown-panel-model .model-select-option.is-active .model-select-check {
        color: var(--mode-model-row-active-fg, var(--text-primary));
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-mode-track {
        flex: 0 0 auto;
    }

    .mobile-prompt-sheet-mode-model {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-top: 44px;
        flex: 1 1 auto;
        min-height: 0;
    }

    .mobile-prompt-sheet-section {
        border: none;
        border-radius: 16px;
        background: var(--mobile-sheet-surface-bg);
        overflow: hidden;
        box-sizing: border-box;
    }

    .mobile-prompt-sheet-section .chip-dropdown-header {
        padding: 12px 14px 8px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.25;
        color: var(--text-secondary);
        border-bottom: none;
        background: transparent;
    }

    .mobile-prompt-sheet-section .chip-dropdown-options:not(.chip-dropdown-options-mode):not(.mobile-prompt-sheet-mode-track) {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0 10px 10px;
        box-sizing: border-box;
    }

    .mobile-prompt-sheet-section.chip-dropdown-panel-mode .mobile-prompt-sheet-mode-track,
    .mobile-prompt-sheet-section.chip-dropdown-panel-mode .chip-dropdown-options-mode {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 2px;
        border-radius: 999px;
        background: var(--mobile-sheet-segment-bg, #fff);
        box-sizing: border-box;
    }

    /* 类型：对齐顶栏 filter-tabs 胶囊分段 */
    .mobile-prompt-sheet-mode-track {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 2px;
        border-radius: 999px;
        background: var(--mobile-sheet-segment-bg, #fff);
        box-sizing: border-box;
    }

    .mobile-prompt-sheet-mode-track .mode-select-flow {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        display: block;
        pointer-events: none;
        opacity: 0;
        border-radius: 999px;
        background: var(--mode-model-tab-active-bg, rgba(0, 0, 0, 0.06));
        box-shadow: var(--mode-model-tab-active-shadow, none);
        transition:
            transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
            width 0.28s cubic-bezier(0.32, 0.72, 0, 1),
            height 0.28s cubic-bezier(0.32, 0.72, 0, 1),
            opacity 0.16s ease;
        will-change: transform, width, height;
    }

    .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-flow {
        opacity: 1;
    }

    .mobile-prompt-sheet-mode-track .mode-select-option {
        position: relative;
        z-index: 1;
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 36px;
        padding: 5px 8px;
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        background: transparent;
        color: var(--text-tertiary);
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-prompt-sheet-mode-track .mode-select-option .model-select-option-icon-wrap,
    .mobile-prompt-sheet-mode-track .mode-select-option .model-select-check,
    .mobile-prompt-sheet-mode-track .mode-select-option .model-select-option-desc {
        display: none;
    }

    .mobile-prompt-sheet-mode-track .mode-select-option .model-select-option-body {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mobile-prompt-sheet-mode-track .mode-select-option .model-select-option-title {
        justify-content: center;
        text-align: center;
        width: 100%;
        font-size: var(--filter-tabs-tab-font-size, 13px);
        font-weight: 500;
        color: inherit;
    }

    .mobile-prompt-sheet-mode-track .mode-select-option.is-active {
        background: var(--mode-model-tab-active-bg, rgba(0, 0, 0, 0.06));
        background-image: none;
        color: var(--mode-model-tab-active-color, var(--text-primary));
        font-weight: 600;
        box-shadow: var(--mode-model-tab-active-shadow, none);
    }

    .mobile-prompt-sheet-mode-track .mode-select-option.is-active .model-select-option-title {
        color: inherit;
        font-weight: 600;
    }

    .mobile-prompt-sheet-mode-track .mode-select-option,
    .mobile-prompt-sheet-mode-track .mode-select-option:hover,
    .mobile-prompt-sheet-mode-track .mode-select-option:focus,
    .mobile-prompt-sheet-mode-track .mode-select-option:focus-visible,
    .mobile-prompt-sheet-mode-track .mode-select-option:active,
    [data-theme="dark"] .mobile-prompt-sheet-mode-track .mode-select-option,
    [data-theme="dark"] .mobile-prompt-sheet-mode-track .mode-select-option:hover,
    [data-theme="dark"] .mobile-prompt-sheet-mode-track .mode-select-option:focus,
    [data-theme="dark"] .mobile-prompt-sheet-mode-track .mode-select-option:focus-visible,
    [data-theme="dark"] .mobile-prompt-sheet-mode-track .mode-select-option:active {
        background: transparent !important;
        color: var(--text-tertiary);
        box-shadow: none;
        outline: none;
    }

    .mobile-prompt-sheet-mode-track .mode-select-option.is-active,
    .mobile-prompt-sheet-mode-track .mode-select-option.is-active:hover,
    .mobile-prompt-sheet-mode-track .mode-select-option.is-active:focus,
    .mobile-prompt-sheet-mode-track .mode-select-option.is-active:focus-visible,
    .mobile-prompt-sheet-mode-track .mode-select-option.is-active:active,
    [data-theme="dark"] .mobile-prompt-sheet-mode-track .mode-select-option.is-active,
    [data-theme="dark"] .mobile-prompt-sheet-mode-track .mode-select-option.is-active:hover,
    [data-theme="dark"] .mobile-prompt-sheet-mode-track .mode-select-option.is-active:focus,
    [data-theme="dark"] .mobile-prompt-sheet-mode-track .mode-select-option.is-active:focus-visible,
    [data-theme="dark"] .mobile-prompt-sheet-mode-track .mode-select-option.is-active:active {
        background: var(--mode-model-tab-active-bg, rgba(0, 0, 0, 0.06)) !important;
        background-image: none !important;
        color: var(--mode-model-tab-active-color, var(--text-primary));
        font-weight: 600;
        box-shadow: var(--mode-model-tab-active-shadow, none);
        outline: none;
    }

    .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active,
    .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:hover,
    .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:focus,
    .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:focus-visible,
    .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:active,
    [data-theme="dark"] .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active,
    [data-theme="dark"] .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:hover,
    [data-theme="dark"] .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:focus-visible {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none;
    }

    @media (prefers-color-scheme: dark) {
        [data-theme="system"] .mobile-prompt-sheet-mode-track .mode-select-option,
        [data-theme="system"] .mobile-prompt-sheet-mode-track .mode-select-option:hover,
        [data-theme="system"] .mobile-prompt-sheet-mode-track .mode-select-option:focus,
        [data-theme="system"] .mobile-prompt-sheet-mode-track .mode-select-option:focus-visible,
        [data-theme="system"] .mobile-prompt-sheet-mode-track .mode-select-option:active {
            background: transparent !important;
            color: var(--text-tertiary);
            box-shadow: none;
            outline: none;
        }

        [data-theme="system"] .mobile-prompt-sheet-mode-track .mode-select-option.is-active,
        [data-theme="system"] .mobile-prompt-sheet-mode-track .mode-select-option.is-active:hover,
        [data-theme="system"] .mobile-prompt-sheet-mode-track .mode-select-option.is-active:focus,
        [data-theme="system"] .mobile-prompt-sheet-mode-track .mode-select-option.is-active:focus-visible,
        [data-theme="system"] .mobile-prompt-sheet-mode-track .mode-select-option.is-active:active {
            background: var(--mode-model-tab-active-bg, rgba(0, 0, 0, 0.06)) !important;
            background-image: none !important;
            color: var(--mode-model-tab-active-color, var(--text-primary));
            font-weight: 600;
            box-shadow: var(--mode-model-tab-active-shadow, none);
            outline: none;
        }

        [data-theme="system"] .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active,
        [data-theme="system"] .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:hover,
        [data-theme="system"] .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:focus,
        [data-theme="system"] .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:focus-visible,
        [data-theme="system"] .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:active {
            background: transparent !important;
            background-image: none !important;
            box-shadow: none;
        }
    }

    /* 模型列表：与 Sheet 主题背景一致，选中项对齐用户卡片色 */
    .mobile-prompt-sheet-section.chip-dropdown-panel-model {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        background: var(--mobile-sheet-surface-bg);
        border-radius: 0;
        overflow: hidden;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-section.chip-dropdown-panel-model {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-section.chip-dropdown-panel-model .chip-dropdown-options,
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-section.chip-dropdown-panel-model #mobile-sheet-model-options,
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-section.chip-dropdown-panel-model #wf-sheet-model-options,
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-section .chip-dropdown-options-model {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .mobile-prompt-sheet-section.chip-dropdown-panel-model .chip-dropdown-header {
        flex: 0 0 auto;
        padding: 12px 14px 8px;
    }

    .mobile-prompt-sheet-section.chip-dropdown-panel-model .chip-dropdown-options {
        flex: 1 1 auto;
        min-height: 0;
        gap: 4px;
        padding: 0 4px 4px;
        border-radius: 0;
        background: transparent;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-prompt-sheet-section.chip-dropdown-panel-model .model-select-option {
        background: transparent;
    }

    .mobile-prompt-sheet-section.chip-dropdown-panel-model .model-select-option.is-active {
        background: var(--mode-model-row-active-bg, rgba(0, 0, 0, 0.06)) !important;
        background-image: none !important;
    }

    .mobile-prompt-sheet-section.chip-dropdown-panel-mode .mobile-prompt-sheet-mode-track .mode-select-option,
    .mobile-prompt-sheet-section.chip-dropdown-panel-mode .chip-dropdown-options-mode .mode-select-option {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 5px 8px;
        border-radius: 999px;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-prompt-sheet-section.chip-dropdown-panel-mode .mobile-prompt-sheet-mode-track .mode-select-option.is-active,
    .mobile-prompt-sheet-section.chip-dropdown-panel-mode .chip-dropdown-options-mode .mode-select-option.is-active,
    .mobile-prompt-sheet-section.chip-dropdown-panel-mode .mobile-prompt-sheet-mode-track .mode-select-option.is-active:hover,
    .mobile-prompt-sheet-section.chip-dropdown-panel-mode .mobile-prompt-sheet-mode-track .mode-select-option.is-active:focus,
    .mobile-prompt-sheet-section.chip-dropdown-panel-mode .mobile-prompt-sheet-mode-track .mode-select-option.is-active:focus-visible,
    .mobile-prompt-sheet-section.chip-dropdown-panel-mode .mobile-prompt-sheet-mode-track .mode-select-option.is-active:active {
        border-radius: 999px;
    }

    .mobile-prompt-sheet-section .model-select-option {
        width: 100%;
        min-width: 0;
        max-width: none;
        box-sizing: border-box;
        border-radius: 12px;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-prompt-sheet-section .model-select-option-icon-wrap {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 0;
        background: transparent;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: inherit;
    }

    .mobile-prompt-sheet-section .model-select-option-icon {
        width: 100%;
        height: 100%;
        margin-top: 0;
        flex-shrink: 0;
    }

    .mobile-prompt-sheet-section .model-select-option-icon-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-prompt-sheet-section .model-select-option .model-select-check {
        margin-top: 0;
        margin-left: auto;
        align-self: center;
        flex-shrink: 0;
    }

    .mobile-prompt-sheet-section .mode-select-option:hover,
    .mobile-prompt-sheet-section .mode-select-option:focus-visible,
    .mobile-prompt-sheet-section .model-select-option:hover,
    .mobile-prompt-sheet-section .model-select-option:focus-visible {
        background: transparent;
        outline: none;
    }

    .mobile-prompt-sheet-section .mode-select-option.is-active,
    .mobile-prompt-sheet-section .model-select-option.is-active {
        background: var(--mobile-sheet-option-active-bg, rgba(0, 0, 0, 0.06));
        background-image: none;
        color: var(--mobile-sheet-option-active-fg, #1a1a1a);
    }

    .mobile-prompt-sheet-section .mode-select-option.is-active .model-select-option-title,
    .mobile-prompt-sheet-section .model-select-option.is-active .model-select-option-title {
        background: none !important;
        background-image: none !important;
        -webkit-background-clip: unset;
        background-clip: unset;
        -webkit-text-fill-color: unset;
        color: var(--mobile-sheet-option-active-fg, #1a1a1a);
    }

    .mobile-prompt-sheet-section .mode-select-option.is-active .model-select-option-desc,
    .mobile-prompt-sheet-section .model-select-option.is-active .model-select-option-desc {
        color: var(--mode-model-row-inactive-desc, var(--text-muted));
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-section .mode-select-option.is-active,
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-section .model-select-option.is-active,
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-section .mode-select-option.is-active:hover,
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-section .model-select-option.is-active:hover,
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-section .mode-select-option.is-active:focus-visible,
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-section .model-select-option.is-active:focus-visible {
        background-image: none !important;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-section .mode-select-option.is-active .model-select-option-desc,
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-section .model-select-option.is-active .model-select-option-desc {
        color: var(--mode-model-row-inactive-desc, var(--text-muted));
    }

    .mobile-prompt-sheet-section .mode-select-option.is-active .model-select-check,
    .mobile-prompt-sheet-section .model-select-option.is-active .model-select-check {
        opacity: 1;
        color: var(--mobile-sheet-check-color, #000000);
    }

    .mobile-prompt-sheet-section .model-select-option.is-active .model-select-option-icon-wrap {
        background: transparent;
        border: none;
    }

    .mobile-prompt-sheet-section .model-select-option.is-active .model-select-option-icon {
        color: inherit;
    }

    /* ===== 「类型 · 模型」弹层：选项样式对齐电脑端下拉（实测桌面端基准）=====
       桌面端（body > .chip-dropdown-menu.is-desktop-prompt-dropdown-fixed / 901px+）：
         · 标题：12px / font-weight 400 / --text-primary，选中同样 400（不加粗）
         · 底色：常态透明；悬停·聚焦·选中统一 rgba(0,0,0,.04)（深色 rgba(255,255,255,.03)）＝ --bg-elev-1
         · 悬停/聚焦时标题不上移（基础规则 .model-select-option:hover .model-select-option-body 带 translateY(-8px)）
       移动端此弹层之前是 13px/500、选中 600 加粗、底色 6%、悬停透明，故在此统一 */
    html[data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-card,
    html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-card {
        /* 复用主题的 --bg-elev-1，浅色 / 深色自动跟随，与电脑端下拉项同一档灰度 */
        --mobile-sheet-option-hover-bg: var(--bg-elev-1, rgba(0, 0, 0, 0.04));
        --mobile-sheet-option-active-bg: var(--bg-elev-1, rgba(0, 0, 0, 0.04));
        --mobile-sheet-option-active-fg: var(--text-primary);
        --mode-model-tab-active-bg: var(--bg-elev-1, rgba(0, 0, 0, 0.04));
        --mode-model-tab-active-color: var(--text-primary);
        --mode-model-row-active-bg: var(--bg-elev-1, rgba(0, 0, 0, 0.04));
        --mode-model-row-active-fg: var(--text-primary);
        --mode-model-row-active-desc: var(--text-secondary);
        --mode-model-row-inactive-desc: var(--text-secondary);
    }

    /* 标题字号 / 字重 / 颜色：类型分段与模型列表一致 */
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option .model-select-option-title,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .chip-dropdown-panel-mode .mode-select-option .model-select-option-title,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .chip-dropdown-panel-model .model-select-option .model-select-option-title {
        font-size: 12px !important;
        font-weight: 400 !important;
        color: var(--text-primary) !important;
    }

    /* 类型分段：常态/悬停文字与电脑端一致（未选中也走主色，靠底色区分选中） */
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option:hover,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option:focus,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option:focus-visible,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option:active {
        color: var(--text-primary) !important;
        font-weight: 400 !important;
    }

    /* 类型分段：悬停/聚焦加浅灰底；选中项由滑动指示块（--mode-model-tab-active-bg）负责上色，
       is-flow-ready 时按钮本体保持透明，避免与指示块叠成两层灰 */
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option:not(.is-active):hover,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option:not(.is-active):focus,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option:not(.is-active):focus-visible,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option:not(.is-active):active {
        background: var(--bg-elev-1, rgba(0, 0, 0, 0.04)) !important;
        background-image: none !important;
    }

    /* 类型分段：选中底色与电脑端同一档（浅色 4% / 深色 3%） */
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option.is-active,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option.is-active:hover,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option.is-active:focus,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option.is-active:focus-visible,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option.is-active:active {
        background: var(--bg-elev-1, rgba(0, 0, 0, 0.04)) !important;
        background-image: none !important;
        color: var(--text-primary) !important;
        font-weight: 400 !important;
        box-shadow: none !important;
    }

    /* 类型分段已用滑动指示块时：选中按钮本体透明（指示块取 --mode-model-tab-active-bg） */
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:hover,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:focus,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:focus-visible,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track.is-flow-ready .mode-select-option.is-active:active {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    /* 模型列表：悬停/聚焦给浅灰底，与电脑端下拉一致 */
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .chip-dropdown-panel-model .model-select-option,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-section .model-select-option {
        color: var(--text-primary);
        /* 胶囊形，与电脑端下拉项一致（桌面 .model-select-option 为 999px） */
        border-radius: 999px !important;
    }

    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .chip-dropdown-panel-model .model-select-option:not(.is-active):hover,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .chip-dropdown-panel-model .model-select-option:not(.is-active):focus,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .chip-dropdown-panel-model .model-select-option:not(.is-active):focus-visible {
        background: var(--bg-elev-1, rgba(0, 0, 0, 0.04)) !important;
        background-image: none !important;
        outline: none;
    }

    /* 模型列表：选中底色对齐电脑端（浅色 4% / 深色 3%），标题不加粗 */
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .chip-dropdown-panel-model .model-select-option.is-active,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-section .model-select-option.is-active,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .chip-dropdown-panel-model .model-select-option.is-active:hover,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .chip-dropdown-panel-model .model-select-option.is-active:focus,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .chip-dropdown-panel-model .model-select-option.is-active:focus-visible,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-section .model-select-option.is-active:hover,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-section .model-select-option.is-active:focus-visible {
        background: var(--bg-elev-1, rgba(0, 0, 0, 0.04)) !important;
        background-image: none !important;
        color: var(--text-primary) !important;
        box-shadow: none !important;
    }

    /* 悬停/聚焦标题不上移：桌面基础规则在 hover 时展开 .model-select-option-desc（max-height 48px），
       行高被 overflow:hidden 锁死 → 描述从下方挤上来，把标题顶高约 9px。
       移动端本就不展示描述（默认 max-height:0/opacity:0），这里让悬停/聚焦也保持折叠，
       标题位置即恒定不动 */
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .model-select-option .model-select-option-desc,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .model-select-option:hover .model-select-option-desc,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .model-select-option:focus .model-select-option-desc,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .model-select-option:focus-visible .model-select-option-desc,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .model-select-option.is-active .model-select-option-desc,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .model-select-option.is-active:hover .model-select-option-desc {
        max-height: 0 !important;
        opacity: 0 !important;
        margin-top: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* 兜底：标题本体与内容盒一律不做位移/缩放动画 */
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .model-select-option:hover .model-select-option-body,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .model-select-option:focus .model-select-option-body,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .model-select-option:focus-visible .model-select-option-body,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .model-select-option.is-active .model-select-option-body,
    html[data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .model-select-option .model-select-option-title {
        transform: none !important;
        scale: none !important;
    }

    .mobile-prompt-sheet-body .chip-dropdown-menu,
    .mobile-prompt-sheet-body .chip-dropdown-menu.is-mobile-prompt-bottom-sheet-content {
        position: static !important;
        display: block !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-prompt-sheet-body .chip-dropdown-panel-gen-settings {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box;
        overflow: visible;
        padding: 0 !important;
    }

    .mobile-prompt-sheet-body .gen-settings-sections,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-sections {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 0;
        flex: 1 1 auto;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
        box-sizing: border-box;
    }

    .mobile-prompt-sheet-body .gen-settings-sections::-webkit-scrollbar,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-sections::-webkit-scrollbar {
        width: 1.5px;
    }
    .mobile-prompt-sheet-body .gen-settings-sections::-webkit-scrollbar-track,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-sections::-webkit-scrollbar-track {
        background: transparent;
    }
    .mobile-prompt-sheet-body .gen-settings-sections::-webkit-scrollbar-thumb,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-sections::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.18);
        border-radius: 2px;
    }

    [data-theme="dark"] .mobile-prompt-sheet-body .gen-settings-sections,
    [data-theme="dark"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-sections {
        scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    }
    [data-theme="dark"] .mobile-prompt-sheet-body .gen-settings-sections::-webkit-scrollbar-thumb,
    [data-theme="dark"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-sections::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.22);
    }

    .mobile-prompt-sheet-body .gen-settings-section,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border: none;
        border-radius: 0;
        background: transparent;
        padding: 0;
        box-sizing: border-box;
    }

    .mobile-prompt-sheet-body .gen-settings-section-title {
        margin: 0;
        padding: 0 6px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .mobile-prompt-sheet-body .gen-settings-section-flow,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-flow {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        display: block;
        pointer-events: none;
        opacity: 0;
        border-radius: 999px;
        background: var(--bg-elev-2, #f2f2f2);
        box-shadow: none;
        transition:
            transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
            width 0.28s cubic-bezier(0.32, 0.72, 0, 1),
            height 0.28s cubic-bezier(0.32, 0.72, 0, 1),
            opacity 0.16s ease;
        will-change: transform, width, height;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options.is-flow-ready .gen-settings-section-flow,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options.is-flow-ready .gen-settings-section-flow {
        opacity: 1;
        visibility: visible;
    }

    [data-theme="dark"] .mobile-prompt-sheet-body .gen-settings-section-flow,
    [data-theme="dark"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-flow {
        background: rgba(255, 255, 255, 0.1);
    }

    @media (prefers-color-scheme: dark) {
        [data-theme="system"] .mobile-prompt-sheet-body .gen-settings-section-flow,
        [data-theme="system"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-flow {
            background: rgba(255, 255, 255, 0.1);
        }
    }

    .mobile-prompt-sheet-body .gen-settings-section-options,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-wrap: nowrap;
        /* 第 266 轮：控件统一高度 + 居中对齐（跟电脑端同一套口径） */
        align-items: center;
        --gen-settings-control-h: 36px;
        align-self: stretch;
        gap: var(--filter-tabs-tab-gap, 6px);
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 8px;
        border: none;
        border-radius: 28px;
        /* 选项轨道跟弹层表面同色：浅色下本来就是 #fff（= 弹层表面），
           深色下原来是 #202020，会在 #121212 的弹层上浮出一块亮条，
           和 header 横杆条带对不上。这里改成弹层表面色，两边都保持一片平色。 */
        background: var(--mobile-sheet-surface-bg, #fff);
        box-shadow: none;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options::-webkit-scrollbar {
        display: none;
    }

    /* 第 632 轮（用户反馈）：「@div#gen-settings-dropdown-sections 显示有异常」——
       手机端那张生成设置表里，「画质 / 输出 / 语言」三格被塞在同一行：三节都被上面那条
       `width: 100% !important` 拉满，又在 24px 间距的**横向** flex 里一起缩
       ⇒ 画质 / 输出被挤成 **0 宽**（实机 x=24 / 48、w=0：标题竖成一列字、档位只剩一条缝），
       只有 `flex: 0 0 auto` 的语言那格保住了 329。
       手机端把这一行改成竖排 —— 跟旁边的「比例 / 数量」一样一节一行，间距也用同一个 12px
       （表容器 `.gen-settings-sections` 的 gap 就是 12），原来那条 `margin-top: 12px`
       是电脑端「整行下移 12px」的产物，在竖排里只会让这一行和上边多出一截空档。 */
    .mobile-prompt-sheet-body .gen-settings-extra-row,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-extra-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 0;
    }

    /* 竖排之后语言那格的「语言」标签原来被 `.gen-settings-section-options` 的
       `align-items: center` 顶到中间（其余几节的标题都在左边）——改成左对齐，
       那颗下拉也跟着贴左。顺手把左右内衬去掉：那一格自己带着 `padding: 8px`
       只是电脑端「标签＋胶囊」小列的规格，留着它标签会比其余标题右移 8px
       （实机 32 vs 24），去了之后整块从 24 起，和「单图 / 套图」那条轨道同一条左缘。 */
    .mobile-prompt-sheet-body .gen-settings-extra-row > .gen-settings-extra-language,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-extra-row > .gen-settings-extra-language {
        align-items: flex-start;
        padding-left: 0;
        padding-right: 0;
        /* 第 633 轮（需求：「@div 取消圆角」）：这一格带着 `.gen-settings-section-options`
           继承来的 28px 大圆角，而它在手机端铺满 329 宽、底色是纯白（--mobile-sheet-surface-bg），
           卡片底是 #f8f7f7 ⇒ 那圈圆角在手机上真能看见（电脑端第 303 轮已经把它归零过一次）。 */
        border-radius: 0;
        /* 标签与下拉之间的 2px 是电脑端那套小列的规格；这里跟别的节一样给 6px
           （`.gen-settings-section` 的 gap），不然「语言」两个字会贴着胶囊。 */
        gap: 6px;
    }

    /* 第 653 轮（需求，移动端）：「@input 背景色要和 @label 背景色一致」——
       语言那格里面那颗输入框从第 301 轮起自带一块白底（`--segment-pill-bg`）＋ 6px 圆角，
       套在外面那颗浅灰胶囊（`--gen-settings-block-bg` / `--bg-elev-2`）里就成了「灰底上叠白块」。
       手机端把这块白底去掉：写 transparent 让胶囊自己的底色透上来，
       连 hover / focus-within 那条变深的底色也跟着走（写死同色反而会在悬停时露馅）。 */
    .mobile-prompt-sheet-body .gen-settings-extra-language .gen-settings-select-input,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-extra-language .gen-settings-select-input {
        background: transparent;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: var(--filter-tabs-tab-height, 30px);
        padding-inline: 8px;
        border: none;
        /* 第 300 轮：跟桌面同一颗圆角（8px，见「单图 / 套图」那颗分段控件） */
        border-radius: 8px;
        background: transparent !important;
        color: var(--text-secondary) !important;
        text-align: center;
        box-shadow: none;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option:not(.is-active):hover,
    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option:not(.is-active):focus-visible {
        background: var(--bg-elev-2, #f2f2f2) !important;
        background-color: var(--bg-elev-2, #f2f2f2) !important;
        background-image: none !important;
        color: var(--text-secondary) !important;
        outline: none;
        box-shadow: none;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.has-icon,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.has-icon {
        flex: 1 1 0 !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0 !important;
        min-height: 44px;
        padding: 6px 4px;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option-label {
        width: 100%;
        text-align: center;
    }

    /* 生成设置各段按钮文字：字号/字重对齐「类型·模型」弹层的类型按钮（12px / 400）。
       桌面端同类选项同样是 12px/400，基础规则里的 13px/500 在弹层里偏大偏粗 */
    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option {
        font-size: 12px;
        font-weight: 400;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option-label,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option-label {
        font-size: 12px;
        font-weight: 400;
    }

    /* 选中态同样不加粗（类型按钮选中也是 400，选中感由滑动指示块承担） */
    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active,
    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active .chip-select-option-label,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active .chip-select-option-label {
        font-size: 12px;
        font-weight: 400;
    }

    /* 比例图标：未选中线条对齐电脑端 —— 桌面是 1px 单线、无内阴影（见 10-prompt-options-dropdowns.css
       的 .ratio-option-frame 与 10-prompt-desktop-dock.css 的桌面覆盖）。
       基础规则自带 1.5px 边框 + inset 1px 阴影，弹层里会叠成「双线」显得又粗又脏，这里还原成单根细线。
       只改 border-width，不写 border 简写：边框颜色留给主题规则（浅色 rgba(26,21,35,.35) / 深色
       --text-secondary），与电脑端取值一致 */
    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option:not(.is-active) .ratio-option-frame,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option:not(.is-active) .ratio-option-frame {
        border-width: 1px;
        background: transparent;
        box-shadow: none;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.has-icon .chip-select-icon,
    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.has-icon .ratio-option-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option:hover,
    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option:focus-visible {
        outline: none;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active {
        background: var(--bg-elev-2, #f2f2f2) !important;
        background-image: none !important;
        color: var(--text-primary) !important;
        font-weight: 600;
        box-shadow: none;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active:hover,
    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active:focus-visible,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active:hover,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active:focus-visible {
        background: var(--bg-elev-2, #f2f2f2) !important;
        background-image: none !important;
        color: var(--text-primary) !important;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options.is-flow-ready .chip-select-option.is-active,
    .mobile-prompt-sheet-body .gen-settings-section-options.is-flow-ready .chip-select-option.is-active:hover,
    .mobile-prompt-sheet-body .gen-settings-section-options.is-flow-ready .chip-select-option.is-active:focus-visible,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options.is-flow-ready .chip-select-option.is-active,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options.is-flow-ready .chip-select-option.is-active:hover,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options.is-flow-ready .chip-select-option.is-active:focus-visible {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options.is-flow-ready .chip-select-option:not(.is-active):hover,
    .mobile-prompt-sheet-body .gen-settings-section-options.is-flow-ready .chip-select-option:not(.is-active):focus-visible,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options.is-flow-ready .chip-select-option:not(.is-active):hover,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options.is-flow-ready .chip-select-option:not(.is-active):focus-visible {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none;
    }

    /* 画质 / 数量：均分整行，覆盖桌面端固定 min-width */
    .mobile-prompt-sheet-body .gen-settings-section[data-gen-param="resolution"] .gen-settings-section-options .chip-select-option:not(.has-icon),
    .mobile-prompt-sheet-body .gen-settings-section[data-gen-param="imageCount"] .gen-settings-section-options .chip-select-option:not(.has-icon),
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section[data-gen-param="resolution"] .gen-settings-section-options .chip-select-option:not(.has-icon),
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section[data-gen-param="imageCount"] .gen-settings-section-options .chip-select-option:not(.has-icon) {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-inline: 8px !important;
    }

    .mobile-prompt-sheet-body .gen-settings-section[data-gen-param="duration"] .gen-settings-section-options {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
        padding: 8px;
        gap: 6px;
    }

    .mobile-prompt-sheet-body .gen-settings-section[data-gen-param="duration"] .gen-settings-section-options .chip-select-option {
        flex: none !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-inline: 8px;
    }

    /* 比例：4 列网格，随 sheet 宽度自适应 */
    .mobile-prompt-sheet-body .gen-settings-section[data-gen-param="ratio"] .gen-settings-section-options,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section[data-gen-param="ratio"] .gen-settings-section-options,
    .mobile-prompt-sheet-body .gen-settings-section-options:has(
        .chip-select-option ~ .chip-select-option ~ .chip-select-option ~ .chip-select-option ~ .chip-select-option
    ),
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options:has(
        .chip-select-option ~ .chip-select-option ~ .chip-select-option ~ .chip-select-option ~ .chip-select-option
    ) {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
        padding: 8px;
        gap: 6px;
    }

    .mobile-prompt-sheet-body .gen-settings-section[data-gen-param="ratio"] .gen-settings-section-options .chip-select-option,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section[data-gen-param="ratio"] .gen-settings-section-options .chip-select-option,
    .mobile-prompt-sheet-body .gen-settings-section-options:has(
        .chip-select-option ~ .chip-select-option ~ .chip-select-option ~ .chip-select-option ~ .chip-select-option
    ) .chip-select-option,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options:has(
        .chip-select-option ~ .chip-select-option ~ .chip-select-option ~ .chip-select-option ~ .chip-select-option
    ) .chip-select-option {
        flex: none !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .mobile-prompt-sheet-body .gen-settings-section[data-gen-param="ratio"] .gen-settings-section-options .chip-select-option.has-icon,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section[data-gen-param="ratio"] .gen-settings-section-options .chip-select-option.has-icon,
    .mobile-prompt-sheet-body .gen-settings-section-options:has(
        .chip-select-option ~ .chip-select-option ~ .chip-select-option ~ .chip-select-option ~ .chip-select-option
    ) .chip-select-option.has-icon,
    #mobile-prompt-sheet-root .mobile-prompt-sheet-body .gen-settings-section-options:has(
        .chip-select-option ~ .chip-select-option ~ .chip-select-option ~ .chip-select-option ~ .chip-select-option
    ) .chip-select-option.has-icon {
        min-width: 0 !important;
        min-height: 44px;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active::before {
        content: none;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active .chip-select-option-label {
        background: none;
        -webkit-background-clip: unset;
        background-clip: unset;
        -webkit-text-fill-color: unset;
        color: inherit;
        font-weight: 600;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option:not(.is-active) .ratio-option-frame,
    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option .ratio-option-frame {
        display: block;
        border: 1.5px solid currentColor;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
        color: var(--text-secondary);
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active .chip-select-icon,
    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active .ratio-option-icon {
        border: none;
        background: none;
        box-shadow: none;
        color: inherit;
    }

    .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active .ratio-option-frame {
        border: 1.5px solid currentColor;
        background: transparent;
        box-shadow: none;
        color: inherit;
    }

    [data-theme="light"] .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option:not(.is-active) .ratio-option-frame,
    [data-theme="light"] .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option .ratio-option-frame {
        border-color: rgba(26, 21, 35, 0.35);
        background: transparent;
        color: rgba(26, 21, 35, 0.55);
    }

    [data-theme="light"] .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active .ratio-option-frame {
        border-color: currentColor;
        background: transparent;
        color: inherit;
    }

    [data-theme="dark"] .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active .ratio-option-frame {
        border-color: currentColor;
        background: transparent;
        color: inherit;
    }

    @media (prefers-color-scheme: dark) {
        [data-theme="system"] .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active .ratio-option-frame {
            border-color: currentColor;
            background: transparent;
            color: inherit;
        }
    }

    [data-theme="light"] .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active .chip-select-icon,
    [data-theme="light"] .mobile-prompt-sheet-body .gen-settings-section-options .chip-select-option.is-active .ratio-option-icon {
        border: none;
        background: none;
        box-shadow: none;
        color: inherit;
    }

    .mobile-prompt-sheet-body .gen-settings-section--duration {
        padding-bottom: 0;
    }

    html[data-mobile-home-chat-shell] #panel-home .chip-dropdown-gen-settings > .chip-dropdown-menu {
        display: none !important;
    }

    html[data-mobile-prompt-sheet-open] {
        overflow: hidden;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-panel-mode {
        width: max-content !important;
        min-width: 0 !important;
        max-width: min(320px, calc(100vw - 24px - var(--safe-left) - var(--safe-right))) !important;
        border: none !important;
        box-sizing: border-box;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-mode .mode-select-option,
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-model .model-select-option {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    /* 创作栏工具条：允许换行/横滑，避免挤出视口 */
    .prompt-box .prompt-toolbar {
        flex-wrap: wrap;
        align-items: flex-end;
        row-gap: 8px;
        padding-inline: max(10px, var(--safe-left));
    }

    .prompt-box .prompt-toolbar-row.is-mode-nav-inline {
        flex-wrap: wrap;
        row-gap: 8px;
        width: 100%;
    }

    .prompt-box .prompt-toolbar-row.is-mode-nav-inline > .prompt-options {
        flex: 1 1 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: visible;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
        touch-action: pan-x;
    }

    html[data-mobile-home-chat-shell] .prompt-box .prompt-toolbar-row.is-mode-nav-inline > .prompt-options {
        touch-action: auto;
    }

    .prompt-box .prompt-toolbar-row.is-mode-nav-inline > .prompt-options::-webkit-scrollbar {
        display: none;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .prompt-toolbar-row.is-mode-nav-inline {
        flex-wrap: nowrap;
        row-gap: 0;
        align-items: center;
        column-gap: 8px;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .prompt-toolbar-row.is-mode-nav-inline > .prompt-options {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: -5px;
        column-gap: 3px;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .generate-btn-wrap {
        position: relative;
        gap: 0;
        overflow: visible;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .generate-btn-wrap.has-price {
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .generate-btn-wrap.has-price #generate-btn {
        position: relative;
        z-index: 1;
        width: max-content;
        min-width: 36px;
        height: 36px;
        padding: 0 12px;
        border-radius: 999px;
        overflow: hidden;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .prompt-toolbar {
        overflow: visible;
    }

    .prompt-box .generate-btn-wrap {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .prompt-box #generate-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 50%;
    }

    .prompt-box .generate-btn-wrap.has-price #generate-btn,
    .wf-composer.prompt-box .wf-composer-send-wrap.has-price #wf-composer-send {
        width: max-content;
        min-width: 36px;
        height: 36px;
        padding: 0 12px;
        border-radius: 999px;
    }

    .prompt-box #generate-btn .generate-btn-icon {
        width: 36px;
        height: 36px;
    }

    .prompt-box #generate-btn .generate-btn-icon svg {
        width: 18px;
        height: 18px;
    }

    /* ---- 手机端：带价格时发送按钮保持圆形，积分数字弧形排在箭头上方 ----
       原来 has-price 会把按钮拉成 [⚡ 0.2] 的长胶囊、并藏掉箭头；
       现在按钮固定 36px 圆，箭头保留，数字塞进 .generate-btn-icon 里沿弧线排布 */
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .generate-btn-wrap.has-price #generate-btn {
        width: 36px;
        min-width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 50%;
        overflow: visible;
    }

    /* has-price 时基础规则把整个 icon 藏掉（桌面端靠右侧价格胶囊承担价格显示），
       移动端要留箭头，所以这里强制恢复 */
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .generate-btn-wrap.has-price #generate-btn .generate-btn-icon {
        position: relative;
        display: inline-flex !important;
        width: 36px;
        height: 36px;
    }

    /* 数字改由 icon 内的弧形文本承担，原价格胶囊在移动端隐藏 */
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .generate-btn-wrap .generate-btn-price-pill {
        display: none !important;
    }

    /* 第 658 轮（需求，移动端）：「@span(.composer-batch-switch-track) 关闭情况下，@span
       (generate-btn-icon) 里面的积分显示在发送按钮左边；#composer-batch-switch 打开情况下
       积分就显示在发送按钮里面」——批量开关关着时把积分挪回发送键左边那颗胶囊
       （星标 + 数字），发送键里那圈弧形积分这时收掉、箭头改成常显（不然会空转）；
       开着时维持 621 轮那套「箭头 ↔ 积分」在按钮里循环。
       这条要写在上面那条 `display: none !important` 之后（同权重、后来者赢）。 */
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box):not(.is-batch-on) .generate-btn-wrap .generate-btn-price-pill {
        display: inline-flex !important;
        align-items: center;
        margin: 0 8px 0 0;
        font-size: 12px;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box):not(.is-batch-on) .generate-btn-wrap.has-price #generate-btn .generate-btn-arc {
        display: none;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box):not(.is-batch-on) .generate-btn-wrap.has-price #generate-btn .generate-btn-icon svg {
        animation: none;
        opacity: 1;
    }

    /* —— 第 621 轮：积分与箭头在发送键里**循环切换**（需求：「@span 改成积分和箭头图标循环切换显示动画，
       积分文字和箭头图标要居中显示」）——
       原来是「0.27」逐字绕按钮圆心旋转成一段弓形、叠在缩小的箭头上方；现在两件都**居中**摆在
       36px 圆里，按 5s 一个周期交替显隐：箭头约 2.7s、积分约 2.3s，中间各留 0.35s 交叉淡入淡出。
       没有积分（arc[hidden]）或处在「解析」态时都不跑切换 —— 否则按钮会周期性空掉。 */
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .generate-btn-wrap.has-price #generate-btn .generate-btn-icon svg {
        width: 16px;
        height: 16px;
        margin-top: 0;
        animation: generate-btn-arrow-cycle 5s ease-in-out infinite;
    }

    /* 积分数字容器：铺满 icon、自己居中，自身不拦截点击 */
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .generate-btn-arc {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        color: inherit;
        font-size: 10.5px;
        line-height: 1;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        animation: generate-btn-price-cycle 5s ease-in-out infinite;
    }

    /* 「解析」态里 arc 被藏起来（见 10-composer-send.css 那条），这时候箭头必须常显 ——
       不然两件一起隐身，按钮会周期性变成空圆 */
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .generate-btn-wrap.is-link-parse #generate-btn .generate-btn-icon svg {
        animation: none;
        opacity: 1;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .generate-btn-wrap.is-link-parse #generate-btn .generate-btn-arc {
        animation: none;
    }

    .prompt-box .prompt-toolbar .chip,
    .prompt-box .prompt-toolbar .chip-dropdown-trigger {
        min-height: 36px;
        padding: 6px 10px;
    }

    .prompt-box-resize-handle:not(#home-prompt-resize-handle) {
        display: none;
    }

    /* 输入框 ≥16px，避免聚焦时自动放大页面 */
    .prompt-input,
    .prompt-editable,
    .hero-results-text.is-editable,
    .hero-results-msg-text.is-editable {
        font-size: var(--mobile-search-input-font-size, 16px);
    }

    /*
     * —— 移动端防缩放：把「所有文本录入控件」的字号抬到 16px ——
     *
     * 背景：iOS Safari 在聚焦 font-size < 16px 的 input / textarea / 可编辑区时，
     * 会强制把整个页面放大（约 1.14 倍），放大后可视区域变宽、能左右拖动，
     * 而且失焦后不会自动还原 —— 这正是「页面被放大、宽度变大」的主因。
     *
     * 注意：靠 viewport 的 user-scalable=no / maximum-scale=1 拦不住这个行为，
     * iOS 10 起系统就刻意忽略这两个值（为了可访问性）。所以字号是唯一可靠的手段。
     *
     * 这里只兜底「文本录入」类型，不碰 checkbox / radio / range / color / file 等
     * 非录入控件，避免影响它们的尺寸。当前全站文本类输入的实测字号只有
     * 12 / 13 / 13.3 / 14 / 16px，没有超过 16px 的，所以统一抬到 16px 不会造成任何回归。
     */
    textarea,
    input:not([type]),
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"] {
        font-size: var(--mobile-search-input-font-size, 16px) !important;
    }

    /*
     * 点击后临时变成可编辑的元素（如对话标题 #hero-results-chat-title 只有 13px）
     * 同样会触发 iOS 缩放，这里一并兜住。
     */
    [contenteditable="true"],
    [contenteditable=""] {
        font-size: var(--mobile-search-input-font-size, 16px) !important;
    }

    /* 手机端搜索输入：16px 防缩放 + 行高对齐 pill + 禁止双击放大延迟 */
    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-expand input,
    #asset-library-modal .asset-library-search-box.is-expanded .asset-library-search-input {
        font-size: var(--mobile-search-input-font-size, 16px);
        line-height: var(--topbar-sync-chrome-h, 32px);
        height: var(--topbar-sync-chrome-h, 32px);
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    html[data-template-tabs-docked] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-clear-btn:not([hidden]),
    #asset-library-modal .asset-library-search-box.is-expanded .asset-library-search-clear-btn:not([hidden]) {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* 素材库：手机端同样是**居中弹窗**（这一轮需求：「取消从底部弹出，改成居中直接显示」）
       —— 不再贴底，四周留 12px / 上下各半屏居中；投影与圆角四角对称。 */
    #asset-library-modal.modal.show {
        align-items: center;
        justify-content: center;
        z-index: 12100;
    }

    #asset-library-modal .asset-library-modal-card,
    #asset-library-modal .asset-library-modal-card.is-maximized {
        position: relative;
        top: auto !important;
        right: auto;
        bottom: auto;
        left: auto;
        align-self: center;
        width: calc(100vw - 24px);
        max-width: none;
        height: min(92dvh, 100%);
        max-height: min(92dvh, 100%);
        margin: 0;
        transform: none;
        /* 第 1514 轮（需求）：「资产库界面的圆角要和个人中心界面底部的圆角大小要一致」——
           原来 32px，比个人中心抽屉（--mobile-sheet-top-radius: 16px）圆一档，统一到同一支 token。
           放大态铺满整屏仍是 0，见上面 `.is-maximized` 那条。 */
        border-radius: var(--mobile-sheet-top-radius, 16px);
        /* 不写 border：手机端弹层统一不画描边，见同文件里那段说明。 */
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3);
        animation: asset-library-dialog-fade-in 0.18s ease;
    }

    /* 居中弹窗不是底部抽屉了：抓手横条收掉（它只在 sheet 上有意义）。
       拖拽收起那套仍挂在卡片上，所以单独藏横条不会把关闭手感一起弄没。 */
    #asset-library-modal .asset-library-modal-card .mobile-sheet-handle {
        display: none !important;
    }

    #asset-library-modal #panel-prompt-library:not([hidden]) {
        overflow: hidden;
    }

    #asset-library-modal .prompt-library-sidebar {
        border: none;
        border-radius: 12px;
        background: var(--bg-elev-2);
        padding: 10px;
        box-sizing: border-box;
        overflow: hidden;
    }

    #asset-library-modal #panel-favorites.favorites-page:not([hidden]) {
        background: transparent;
        border-radius: 0;
        padding: 10px;
        box-sizing: border-box;
    }

    #asset-library-modal .asset-library-modal-layout {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    #asset-library-modal .asset-library-modal-main {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    #asset-library-modal .asset-library-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        /* 第 990/991 轮：跟主题色那层玻璃面（原来是写死白） */
        background: var(--glass-surface-bg, color-mix(in srgb, var(--bg-base, #f8f7f7) 92%, transparent));
        border-radius: 28px;
        margin: 0 12px max(12px, var(--safe-bottom));
        padding: 10px 12px 12px;
        box-sizing: border-box;
    }

    #asset-library-modal .asset-library-modal-body > .asset-library-section:not([hidden]) {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    #asset-library-modal #panel-materials.materials-page:not([hidden]) {
        overflow: hidden;
        position: relative;
    }

    #asset-library-modal .cloud-storage-grid-wrap {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    [data-theme="dark"] #asset-library-modal .asset-library-modal-body {
        background: var(--panel-surface-bg, #1e1e1e);
    }

    @media (prefers-color-scheme: dark) {
        [data-theme="system"] #asset-library-modal .asset-library-modal-body {
            background: var(--panel-surface-bg, #1e1e1e);
        }
    }

    @media (prefers-color-scheme: light) {
        [data-theme="system"] #asset-library-modal .asset-library-modal-body {
            background: #ffffff;
        }
    }

    /* 云存储用量：移到素材分区(section)正下方后的独立样式（值文字+进度条） */
    #asset-library-modal .asset-library-modal-body > .asset-library-modal-storage {
        flex: 0 0 auto;
        margin: 10px 2px 0;
        min-width: 0;
        max-width: none;
        gap: 4px;
    }

    #asset-library-modal .asset-library-modal-body > .asset-library-modal-storage .asset-library-modal-storage-value {
        text-align: left;
        font-size: 11px;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #asset-library-modal .materials-breadcrumb-row .materials-breadcrumb {
        flex: 1 1 auto;
        max-width: none;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    #asset-library-modal .materials-breadcrumb-row .materials-breadcrumb-btn.is-current {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 素材库底部工具栏：手机端宽度自适应内容（按按钮数收缩），水平居中；
       按钮显示图标+文字；刷新按钮在末位，上传按钮已移到文件夹区（见下方） */
    #asset-library-modal .cloud-storage-toolbar {
        display: block;
        width: max-content;
        max-width: calc(100% - 24px);
        padding: 5px;
        border-radius: 16px;
    }

    #asset-library-modal .cloud-storage-toolbar-primary {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        min-width: 0;
    }

    #asset-library-modal .cloud-storage-toolbar .materials-toolbar-btn {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        height: 40px;
        padding: 0 12px;
        gap: 4px;
        border-radius: 10px;
    }

    #asset-library-modal .cloud-storage-toolbar .materials-toolbar-btn-label {
        display: block;
        min-width: 0;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
    }

    /* 选中态按钮（全选/剪切/删除合并钮）：仅显示数量徽标，不显示文字；
       未选中时数量徽标带 [hidden] 隐藏、文字正常显示（全选按钮保持四宫格文字一致） */
    #asset-library-modal .cloud-storage-toolbar #cloud-storage-select-all:has(.materials-toolbar-btn-count:not([hidden])) .materials-toolbar-btn-label,
    #asset-library-modal .cloud-storage-toolbar #cloud-storage-download:has(.materials-toolbar-btn-count:not([hidden])) .materials-toolbar-btn-label,
    #asset-library-modal .cloud-storage-toolbar #cloud-storage-cut:has(.materials-toolbar-btn-count:not([hidden])) .materials-toolbar-btn-label,
    #asset-library-modal .cloud-storage-toolbar #cloud-storage-delete-all:has(.materials-toolbar-btn-count:not([hidden])) .materials-toolbar-btn-label {
        display: none;
    }

    #asset-library-modal .cloud-storage-toolbar #cloud-storage-select-all .materials-toolbar-btn-count,
    #asset-library-modal .cloud-storage-toolbar #cloud-storage-download .materials-toolbar-btn-count,
    #asset-library-modal .cloud-storage-toolbar #cloud-storage-cut .materials-toolbar-btn-count,
    #asset-library-modal .cloud-storage-toolbar #cloud-storage-delete-all .materials-toolbar-btn-count {
        display: block;
        min-width: 0;
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
    }

    /* 工具栏移出 section 后作为 modal-body 直接子级：flex 底部，正常流 */
    #asset-library-modal .asset-library-modal-body > .cloud-storage-toolbar {
        flex: 0 0 auto;
        margin: 8px auto 0;
    }

    /* 移动端底部工具栏：数量徽标 (N) 显示（文字已不含数量，与桌面端一致） */
    #asset-library-modal .asset-library-modal-body > .cloud-storage-toolbar .materials-toolbar-btn-count {
        display: inline;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        color: inherit;
    }

    /* 移动端：底部工具栏与筛选区清空按钮的图标线条更细 */
    #asset-library-modal .cloud-storage-toolbar .materials-toolbar-btn svg,
    #asset-library-modal .asset-library-filter-clear-btn svg {
        stroke-width: 1.4;
    }

    /* ---------------------------------------------------------------- 第 622 轮：素材库手机端四件
       需求：「@button#cloud-storage-select-all 移到 @button#cloud-storage-move-to-folder 左边」、
             「@div(.cloud-storage-toolbar-primary) 里面除了 @button#cloud-storage-select-all
              其他按钮都不要显示数字和文字」、
             「@button#materials-new-folder 改成图标方式显示在 @button#asset-library-search-btn 右边」、
             「@h2#asset-library-modal-sidebar-title 居中显示」。 */

    /* ① 全选排到「移到」左边。
       用 order 而不是改 DOM：全选 / 移动 / 剪切 / 删除这几颗会被 syncMaterialsUploadBtnHost
       按状态搬来搬去（勾选文件夹时全选与删除要去侧栏），order 只在同一容器里生效、搬走就自动失效。 */
    #asset-library-modal .cloud-storage-toolbar-primary #cloud-storage-select-all {
        order: -1;
    }

    /* ② 除全选外一律只留图标：数量徽标 (N) 与文字都收起来（全选那颗保留「已选 N」文字）。
       ⚠️ 选择器要压过上面「数量徽标显示」那两条同域规则 —— 多带一层
       `.cloud-storage-toolbar-primary` 与 `:not(#cloud-storage-select-all)`，权重足够。 */
    #asset-library-modal .cloud-storage-toolbar-primary .materials-toolbar-btn:not(#cloud-storage-select-all) .materials-toolbar-btn-label,
    #asset-library-modal .cloud-storage-toolbar-primary .materials-toolbar-btn:not(#cloud-storage-select-all) .materials-toolbar-btn-count {
        display: none;
    }

    /* ③ 「新建文件夹 / 更多」那颗：手机端也搬进侧栏那个容器（搜索键右边一格），做成 34px 圆钮。
       DOM 的搬运在 11-auth-boot.js 的 placeMaterialsNewFolderButton（第 622 轮起两端都用这个容器）；
       桌面那份长相在 31-desktop-flat-chrome.css，这里是窄屏那份。 */
    /* ---------------------------------------------------------------- 第 623 轮：素材库手机端五件 */

    /* ① 「@h2(.asset-library-modal-sidebar-title) 去除背景色」——
       标题身上那圈胶囊底其实来自 `::before`（24-asset-library.css，hover / 聚焦 /
       面板打开时从 0 淡到 1）。手机端整颗拿掉：这条标题已经在抬头那一行里居中站着，
       再浮一层底反而像颗按不动的大胶囊。 */
    html[data-mobile-home-chat-shell] #asset-library-modal .asset-library-modal-sidebar-title::before {
        display: none;
    }

    /* ② 标题搬进抓手那一格（DOM 搬运在 01-bootstrap-gallery.js 的
       syncAssetLibrarySidebarTitlePlacement），这里只管长相：
         · 水平居中 = 那一格（= 整张卡片宽）的中点；
         · 文字顶边与 `.mobile-sheet-title`（「资产库」）对齐 —— 它那条是
           `line-height: 32px` + 那一格 `top: 8px`，而抓手区比卡片 content 顶边低 1px
           （卡片 padding-top:1px），所以这里取 top: 7px、行高也给 32px，
           两条文字的**行盒顶边**就落在同一条线上（字号 14 vs 16，字形顶边差 ~1px）。
         · 绝对定位是为了不打扰抓手区自己的居中（那颗 drag handle）。 */
    html[data-mobile-home-chat-shell] #asset-library-modal .asset-library-modal-card > .mobile-sheet-dismiss-zone > .asset-library-modal-sidebar-title {
        position: absolute;
        left: 0;
        right: 0;
        top: 7px;
        height: 32px;
        min-height: 32px;
        line-height: 32px;
        justify-content: center;
        pointer-events: auto;
    }

    html[data-mobile-home-chat-shell] #asset-library-modal .asset-library-modal-card > .mobile-sheet-dismiss-zone > .asset-library-modal-sidebar-title > .asset-library-modal-sidebar-title-text {
        line-height: 32px;
    }

    /* ⚠️ 下拉箭头那颗 svg 的尺寸是**绑在 .asset-library-modal-sidebar-head 上**的
       （24-asset-library.css：14×14 + flex:0 0 auto）—— 标题搬出那一格之后就没人给尺寸了，
       实测它会撑成 277×277 把文字挤到左边。这里补回来（含展开翻面那一条）。 */
    html[data-mobile-home-chat-shell] #asset-library-modal .asset-library-modal-card > .mobile-sheet-dismiss-zone > .asset-library-modal-sidebar-title > .asset-library-category-caret {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
        color: var(--text-tertiary, rgba(26, 21, 35, 0.5));
        transition: transform 0.15s ease;
    }

    html[data-mobile-home-chat-shell] #asset-library-modal .asset-library-modal-card > .mobile-sheet-dismiss-zone > .asset-library-modal-sidebar-title[aria-expanded="true"] > .asset-library-category-caret {
        transform: rotate(180deg);
    }

    /* ③ 「@span(.cloud-storage-folder-plus) 图标要在中心位置」——
       它原来是 36×36 的块，里面那颗 18px 的 svg 直接 block 排进去 ⇒ 贴左上。
       改成铺满那颗 34px 圆钮、自己居中。 */
    html[data-mobile-home-chat-shell] #asset-library-modal .asset-library-new-folder-slot .cloud-storage-folder-plus {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    /* ④ 「@aside 里面的控件高度要一致并且水平对齐」——
       几颗控件本来高度都是 34（排序 / 筛选 / 搜索键 / 更多键），但「更多」那颗槽位是
       `top: 50%` 居中于**整条 aside**（含底部 8px 内衬）⇒ 比同伴低 4px（实机 90 vs 86）。
       这里统一按内容区顶边摆平：top: 0 + 34px 高。 */
    html[data-mobile-home-chat-shell] #asset-library-modal .asset-library-modal-layout .asset-library-modal-sidebar > :is(.asset-library-section-tabs, .asset-library-new-folder-slot, .asset-library-search-box) {
        top: 0;
        transform: none;
        height: 34px;
        min-height: 34px;
        align-items: center;
    }

    /* 标题居中之后，「排序 / 筛选」这两颗胶囊原来站的那个中点让给标题：它们靠左排
       （两根 auto 外边距改成一左一右，撑满的那份留给标题那格）。
       ⚠️ 第 625 轮（需求：「@div#asset-library-section-tabs 居中显示」）：又改回居中 ——
       这根行里除它之外只有两颗**绝对定位**的键（搜索盒 /「更多」槽位），不占流内空间，
       所以两根 auto 外边距会把它按整条侧栏的内容区均分居中。
       ⚠️ 那点差半格：侧栏内容区是 12..353（右侧有 12px 内衬，见上面的 aside 那条），
       按它居中得 132.5，而卡片与上方分类标题的中线在 188.5。给容器补一份**左**内衬
       （盒子透明，只有可见的两颗胶囊挪位）把可见内容右移半格 = 6px，正好与卡片中线对齐。
       搜索结果展开时这根行整条 display:none（见下面那条），不受影响。 */
    #asset-library-modal .asset-library-modal-layout .asset-library-modal-sidebar > .asset-library-section-tabs {
        margin-left: auto;
        margin-right: auto;
        padding-left: 12px;
    }

    #asset-library-modal .asset-library-modal-layout .asset-library-modal-sidebar > .asset-library-new-folder-slot {
        /* 钉在侧栏最右缘、搜索键右边一格（桌面那份也是这么钉的：搜索 right:52 / 这颗 right:12） */
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    #asset-library-modal .asset-library-new-folder-slot > .cloud-storage-folder--new {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-secondary, rgba(26, 21, 35, 0.72));
        box-shadow: none;
    }

    #asset-library-modal .asset-library-new-folder-slot > .cloud-storage-folder--new:hover,
    #asset-library-modal .asset-library-new-folder-slot > .cloud-storage-folder--new:focus-visible {
        background: var(--bg-elev-1, rgba(0, 0, 0, 0.04));
        color: var(--text-primary);
        outline: none;
    }

    /* 卡片那套皮（预览块 + 名字）在这颗圆钮里全部退场 */
    #asset-library-modal .asset-library-new-folder-slot .cloud-storage-folder-preview {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        min-height: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    /* 只藏卡片那张「名字」；`.cloud-storage-folder-plus` 里装着 svg，得留着 */
    #asset-library-modal .asset-library-new-folder-slot .cloud-storage-folder-name {
        display: none;
    }

    #asset-library-modal .asset-library-new-folder-slot .cloud-storage-folder-preview svg {
        width: 18px;
        height: 18px;
    }

    /* ④ 侧栏标题居中：标题那一格铺满整行居中（右边的搜索键 / 更多键不受影响）。
       这一格原本靠左 12px，标题就贴在左边缘上。 */
    #asset-library-modal .asset-library-modal-sidebar > .asset-library-modal-sidebar-head {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 铺满整行只是为了取中点，别把底下的搜索键 / 更多键的点击吞了 */
        pointer-events: none;
    }

    #asset-library-modal .asset-library-modal-sidebar > .asset-library-modal-sidebar-head > .asset-library-modal-sidebar-title {
        pointer-events: auto;
    }

    /* 上传按钮：浮在素材分区(section)内底部居中的纯图标钮 */
    /* 第 267 轮：录音键跟着上传键一起落到分区里（那颗上传键在窄屏是底部居中的圆钮），
       摆在它左边 26px；状态胶囊同样向左长，但窄屏收窄一点免得顶出屏幕。 */
    #asset-library-modal #panel-materials .materials-record {
        position: absolute;
        left: 50%;
        bottom: 14px;
        transform: translateX(calc(-100% - 26px));
        z-index: 7;
    }

    #asset-library-modal #panel-materials .materials-record.is-recording .materials-record-live {
        max-width: min(52vw, 240px);
    }

    /* 第 631 轮（需求）：「@button#materials-record-mic 点击展开的宽度不要太大」——
       那排实时音量条是 14 根（电脑端那颗 34px 胶囊的规格），手机端整颗胶囊原来量到 158px
       （x=27..185，比素材分区左缘 36 还多探出 9px）。这里把内容收一收，落到 ~127px：
       音量条 3→2px、条间距 2→1.5px、胶囊内衬 12/4→10/3、行内 gap 8→6、计时列 30→26。
       宽度上限也跟着收一档（长时间录到 12:34 那种也不至于再撑出去）。 */
    #asset-library-modal #panel-materials .materials-record.is-recording .materials-record-live {
        max-width: min(46vw, 150px);
        padding: 0 3px 0 10px;
        gap: 6px;
    }

    #asset-library-modal #panel-materials .materials-record-wave {
        gap: 1.5px;
    }

    #asset-library-modal #panel-materials .materials-record-wave-bar {
        width: 2px;
    }

    #asset-library-modal #panel-materials .materials-record-time {
        min-width: 26px;
    }

    /* 第 631 轮（需求）：「@button#materials-new-folder 添加边框」——
       这颗「更多」圆钮在手机端原来是纯图标（透明底、无边框），加一圈 --border-soft；
       悬停那层浅灰底（24 里的 :hover）留着当反馈。 */
    #asset-library-modal #materials-new-folder {
        border: 1px solid var(--border-soft, rgba(0, 0, 0, 0.08));
    }

    #asset-library-modal #panel-materials #materials-upload-btn {
        position: absolute;
        left: 50%;
        bottom: 14px;
        transform: translateX(-50%);
        z-index: 7;
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        gap: 0;
        border-radius: 999px;
        border: none;
        background: color-mix(in srgb, var(--modal-card-bg, #fff) 65%, transparent);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
        color: var(--text-primary);
        opacity: 0.7;
        -webkit-tap-highlight-color: transparent;
    }

    #asset-library-modal #panel-materials #materials-upload-btn .materials-toolbar-btn-label {
        display: none;
    }

    #asset-library-modal #panel-materials #materials-upload-btn svg {
        width: 20px;
        height: 20px;
        stroke-width: 1.6;
    }

    #asset-library-modal #panel-materials #materials-upload-btn:hover:not(:disabled),
    #asset-library-modal #panel-materials #materials-upload-btn:focus-visible:not(:disabled),
    #asset-library-modal #panel-materials #materials-upload-btn:active:not(:disabled) {
        opacity: 1;
        background: color-mix(in srgb, var(--text-primary, #1a1523) 84%, #fff);
    }

    /* 刷新按钮已移入底部工具栏：隐藏类型筛选行内的旧按钮组容器（已移入筛选容器内部） */
    #asset-library-modal .cloud-storage-grid-wrap .cloud-storage-toolbar-actions {
        display: none !important;
    }

    /* 桌面端行容器在移动端透明化，子元素维持原有文档流 */
    #asset-library-modal .cloud-storage-grid-wrap .cloud-storage-filter-line {
        display: contents;
    }

    /* 面包屑导航移出面包屑行（移到 aside 下方、文件夹区上方）后的独立样式 */
    #asset-library-modal .asset-library-modal-body > .materials-breadcrumb {
        flex: 0 0 auto;
        margin: 0 2px;
        padding: 0;
        min-height: 20px;
        font-size: 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    #asset-library-modal .asset-library-modal-body > .materials-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    /* 文件夹区移到 aside 下方（面包屑导航下方、素材分区上方）后的间距；
       左右 padding 归零：新建文件夹按钮与分区 section 左缘对齐；
       宽度自适应内容（内容超出时横向滚动），隐藏滚动条，右缘箭头按钮可查看更多 */
    #asset-library-modal .asset-library-modal-body > .cloud-storage-folders {
        position: relative;
        flex: 0 0 auto;
        margin: 6px 0 10px;
        padding-left: 0;
        padding-right: 0;
        width: max-content;
        max-width: 100%;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #asset-library-modal .asset-library-modal-body > .cloud-storage-folders::-webkit-scrollbar {
        display: none;
    }

    /* 文件夹预览层与里面的缩略图网格：**与「新建文件夹」那张同尺寸同圆角**
       （需求：「@div 的大小和圆角要和 @span 一致」——@div 是 .cloud-storage-folder-thumbs，
       @span 是 .cloud-storage-folder-preview，而窄屏上参考的就是「新建文件夹」那张
       78×78 / 16px 的预览层）。
       窄屏原来预览层是 `width: 100%; aspect-ratio: 1` —— 跟着 108px 的列宽撑成 108×108，
       比新建那张大一整圈；里面的缩略图网格 width/height:100% 又跟着变 108，
       内衬 13px 后 2×2 的格子是 38，而不是桌面那套 23。
       两处一起收回 78×78：行列、内衬（13px）、圆角（16px）就全部回到与桌面 / 新建卡一致的那套。 */
    #asset-library-modal .cloud-storage-folder:not(.cloud-storage-folder--new) .cloud-storage-folder-preview {
        width: 78px;
        height: 78px;
        margin: 0 auto;
        aspect-ratio: auto;
    }

    /* 素材类型筛选容器：窄屏已被掏空（「筛选」「排序」两颗挨到了分类下拉右边，
       见 syncMaterialsUploadBtnHost；「缩放」那颗本就 display:none）——
       空容器不能留着：它自带 `margin: 0 12px 12px`，会在素材网格上方留一条缝。 */
    #asset-library-modal .cloud-storage-grid-wrap .cloud-storage-filter-line > .cloud-storage-kind-filter {
        display: none;
    }

    /* 视图切换（裁剪填充 / 完整比例）整块已删：视图固定在「完整比例」，
       窄屏不再需要那条「仅桌面端提供」的隐藏规则。 */

    /* 展示尺寸（滑杆）仅桌面端：窄屏网格固定 3 列、卡片宽度由 flex:1 撑满，
       调了也没地方生效。排序留着 —— 它在哪都一样有用。 */
    #asset-library-modal .cloud-storage-grid-wrap .cloud-storage-filter-line #cloud-storage-size-trigger {
        display: none !important;
    }

    /* 横向滚动箭头：移动端隐藏（内容溢出时用户靠横向滑动手势查看更多） */
    #asset-library-modal .cloud-storage-scroll-arrow.is-visible {
        display: none !important;
    }

    /* 底部工具栏 + 上传按钮已移到文件夹区：文件网格预留底部空间，避免被工具栏遮挡 */
    #asset-library-modal #cloud-storage-grid.cloud-storage-grid,
    #asset-library-modal #favorites-gallery.cloud-storage-grid {
        padding-bottom: 128px;
    }

    #asset-library-modal .prompt-library-category-list {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    #asset-library-modal .prompt-library-category-list::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
        background: transparent !important;
    }

    #asset-library-modal .asset-library-pick-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    #asset-library-modal .asset-library-pick-hint {
        flex: none;
        width: 100%;
    }

    #asset-library-modal .asset-library-pick-actions {
        width: 100%;
        justify-content: stretch;
    }

    #asset-library-modal .asset-library-pick-actions .btn-secondary,
    #asset-library-modal .asset-library-pick-actions .btn-primary {
        flex: 1 1 0;
        min-width: 0;
    }

    #asset-library-modal .asset-library-pick-key {
        display: none !important;
    }

    #panel-home .hero-content {
        max-width: 100%;
    }

    #panel-home:has(.hero-results:not([hidden])) .hero {
        padding-inline: max(12px, calc(12px + var(--safe-left)));
    }

    :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .hero-results,
    :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box {
        background: var(--hero-chat-surface-bg);
    }

    :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box .prompt-input-wrap,
    :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box .prompt-toolbar {
        background: transparent;
    }

    .hero-title {
        /* 第 434 轮：与上面移动端空态那条同一套换算（见 11/14、8/7 的说明） */
        font-size: clamp(
            calc(var(--site-hero-title-size, 28px) * 11 / 14),
            6vw,
            calc(var(--site-hero-title-size, 28px) * 8 / 7)
        );
    }

    .quick-tag {
        min-height: 32px;
        padding: 6px 12px;
    }

    /* 快捷词：仅在设置关闭时隐藏（由 .quick-prompts[hidden] 控制） */

    /* 手机端：素材库 / 积分 / 头像 显示在顶栏最右侧 */
    html[data-mobile-topbar-user-dock] .app-sidebar-footer {
        display: none !important;
    }

    html[data-mobile-topbar-user-dock] .topbar-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        min-width: 0;
    }

    html[data-mobile-topbar-user-dock] .topbar-right .notify-dropdown .notify-trigger,
    html[data-mobile-topbar-user-dock] .topbar-right #upgrade-btn {
        display: none !important;
    }

    html[data-mobile-topbar-user-dock] .topbar-right .notify-dropdown.is-open {
        display: block !important;
    }

    html[data-mobile-topbar-user-dock] .topbar-right #asset-library-trigger.is-sidebar-asset-trigger {
        order: 1;
        flex: 0 0 auto;
        width: var(--asset-library-trigger-chip-size);
        height: var(--asset-library-trigger-chip-size);
        min-height: var(--asset-library-trigger-chip-size);
        margin: 0;
        padding: 0;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: var(--text-primary);
        transition: background 0.15s ease, color 0.15s ease;
    }

    html[data-mobile-topbar-user-dock] .topbar-right #asset-library-trigger.is-sidebar-asset-trigger:hover:not(.active),
    html[data-mobile-topbar-user-dock] .topbar-right #asset-library-trigger.is-sidebar-asset-trigger:focus-visible:not(.active) {
        background: var(--bg-elev-1);
        color: var(--text-primary);
    }

    html[data-mobile-topbar-user-dock] .topbar-right #asset-library-trigger.is-sidebar-asset-trigger.active,
    html[data-mobile-topbar-user-dock] .topbar-right #asset-library-trigger.is-sidebar-asset-trigger.active:hover,
    html[data-mobile-topbar-user-dock] .topbar-right #asset-library-trigger.is-sidebar-asset-trigger.active:focus-visible {
        background: var(--bg-elev-2);
        color: var(--text-primary);
    }

    html[data-mobile-topbar-user-dock] .topbar-right #asset-library-trigger.is-sidebar-asset-trigger .asset-library-icon {
        width: var(--asset-library-icon-glyph-size);
        height: var(--asset-library-icon-glyph-size);
        color: inherit;
        transition: color 0.15s ease;
    }

    /* 不再悬停放大、不再实心填充（同桌面端那两条需求） */

    html[data-theme="dark"][data-mobile-topbar-user-dock] .topbar-right #asset-library-trigger.is-sidebar-asset-trigger.active .asset-library-icon svg,
    html[data-theme="dark"][data-mobile-topbar-user-dock] .topbar-right #asset-library-trigger.is-sidebar-asset-trigger[aria-expanded="true"] .asset-library-icon svg {
        color: inherit;
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-topbar-user-dock] .topbar-right #asset-library-trigger.is-sidebar-asset-trigger.active .asset-library-icon svg,
        html[data-theme="system"][data-mobile-topbar-user-dock] .topbar-right #asset-library-trigger.is-sidebar-asset-trigger[aria-expanded="true"] .asset-library-icon svg {
            color: inherit;
        }
    }

    html[data-mobile-topbar-user-dock] .topbar-right #asset-library-trigger.is-sidebar-asset-trigger .tab-label {
        display: none;
    }

    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action {
        order: 0;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        flex: 0 0 auto;
        width: var(--asset-library-trigger-chip-size);
        min-width: var(--asset-library-trigger-chip-size);
        max-width: var(--asset-library-trigger-chip-size);
        height: var(--asset-library-trigger-chip-size);
        min-height: var(--asset-library-trigger-chip-size);
        margin: 0;
        padding: 0;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: var(--text-primary);
        text-align: center;
        transition: background 0.15s ease, color 0.15s ease;
    }

    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action:hover:not([aria-expanded="true"]),
    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action:focus-visible:not([aria-expanded="true"]) {
        background: var(--bg-elev-1);
        color: var(--text-primary);
    }

    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action[aria-expanded="true"],
    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action[aria-expanded="true"]:hover,
    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action[aria-expanded="true"]:focus-visible,
    html.is-notify-sheet-open .topbar-right #user-menu-notify-btn.is-mobile-topbar-action {
        background: var(--bg-elev-2);
        color: var(--text-primary);
    }

    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action > span:not(.user-menu-item-badge) {
        display: none;
    }

    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action .user-menu-item-chevron {
        display: none;
    }

    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action svg:not(.user-menu-item-chevron) {
        width: 16px;
        height: 16px;
        margin: 0;
        flex: 0 0 auto;
        color: inherit;
        transition: transform 0.15s ease, color 0.15s ease;
    }

    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action:hover svg:not(.user-menu-item-chevron),
    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action:focus-visible svg:not(.user-menu-item-chevron) {
        transform: scale(1.08);
    }

    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action[aria-expanded="true"] svg:not(.user-menu-item-chevron),
    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action[aria-expanded="true"] svg:not(.user-menu-item-chevron) path,
    html.is-notify-sheet-open .topbar-right #user-menu-notify-btn.is-mobile-topbar-action svg:not(.user-menu-item-chevron),
    html.is-notify-sheet-open .topbar-right #user-menu-notify-btn.is-mobile-topbar-action svg:not(.user-menu-item-chevron) path {
        fill: none;
        stroke: currentColor;
        color: inherit;
        transform: none;
    }

    html[data-theme="dark"][data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action[aria-expanded="true"] svg:not(.user-menu-item-chevron),
    html[data-theme="dark"].is-notify-sheet-open .topbar-right #user-menu-notify-btn.is-mobile-topbar-action svg:not(.user-menu-item-chevron) {
        color: inherit;
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action[aria-expanded="true"] svg:not(.user-menu-item-chevron),
        html[data-theme="system"].is-notify-sheet-open .topbar-right #user-menu-notify-btn.is-mobile-topbar-action svg:not(.user-menu-item-chevron) {
            color: inherit;
        }
    }

    html[data-mobile-topbar-user-dock] .topbar-right #user-menu-notify-btn.is-mobile-topbar-action .user-menu-item-badge {
        /* 第 410 轮（需求）：只显示红点、不显示数量（桌面端那颗同一套口径）。
           这里的按钮同样是 32px 方、图标 16px（盒 8..24），所以点也按 8px 给，
           落点压到铃铛右上肩（比桌面端那颗低 1px —— 图标小一圈，笔画位置跟着低）。 */
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 2;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 8px;
        height: 8px;
        min-width: 8px;
        padding: 0;
        font-size: 0;
        line-height: 1;
        color: #ffffff;
        background: #ef4444;
        border: none;
        border-radius: 999px;
        box-shadow: none;
        box-sizing: border-box;
    }

    html[data-mobile-topbar-user-dock] .user-slot {
        display: flex;
        align-items: center;
        order: 2;
        gap: 8px;
        flex: 0 0 auto;
        min-width: 0;
    }

    html[data-mobile-topbar-user-dock] .user-slot > #user-menu-wrap:not([hidden]) {
        display: inline-flex !important;
        visibility: visible;
        opacity: 1;
    }

    .user-slot #guest-lang-slot:not([hidden]) {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
    }

    .user-slot #guest-lang-slot:has(.guest-lang-dropdown.is-open) {
        z-index: 220;
    }

    #guest-lang-slot .guest-lang-dropdown {
        top: 100%;
        bottom: auto;
        left: 0;
        right: 0;
    }

    #guest-lang-slot .guest-lang-dropdown .settings-lang-menu {
        top: calc(100% + 6px);
        bottom: auto;
        right: 0;
        left: auto;
        transform: translateY(0);
    }

    .user-slot #guest-lang-slot:has(.guest-lang-dropdown.is-open) .guest-lang-btn {
        position: relative;
        z-index: 1;
    }

    .topbar-right .user-menu-wrap {
        --user-avatar-sync-bg: var(--user-avatar-chrome-bg, #6fb5ed);
        --user-avatar-sync-fg: #ffffff;
    }

    .topbar-right .user-avatar,
    .topbar-right #user-avatar-btn,
    .topbar-right .user-menu-wrap .user-avatar,
    .topbar-right .user-menu-wrap #user-avatar-btn {
        width: var(--asset-library-trigger-chip-size);
        height: var(--asset-library-trigger-chip-size);
        min-width: var(--asset-library-trigger-chip-size);
        min-height: var(--asset-library-trigger-chip-size);
        font-size: var(--asset-library-icon-glyph-size);
        background: var(--user-avatar-chrome-bg, #6fb5ed);
        color: #ffffff;
        border: 1px solid var(--asset-library-icon-chip-border);
        box-sizing: border-box;
    }

    .topbar-right #user-avatar-btn:has(.user-avatar-img:not([hidden])),
    .topbar-right .user-menu-wrap #user-avatar-btn:has(.user-avatar-img:not([hidden])),
    .topbar-right #user-avatar-btn:has(.user-avatar-img:not([hidden])):hover,
    .topbar-right .user-menu-wrap #user-avatar-btn:has(.user-avatar-img:not([hidden])):hover {
        /* 默认头像透明底，不要白圆片（同 04-topbar-user-shell.css） */
        background: transparent;
    }

    .topbar-right .user-avatar:hover,
    .topbar-right #user-avatar-btn:hover,
    .topbar-right .user-menu-wrap .user-avatar:hover,
    .topbar-right .user-menu-wrap #user-avatar-btn:hover {
        background: var(--user-avatar-chrome-bg-hover, color-mix(in srgb, #6fb5ed 86%, #000));
    }

    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked {
        order: 1;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        width: fit-content;
        max-width: none;
        min-width: 0;
        height: var(--topbar-sync-chrome-h, calc(var(--topbar-chrome-h) - 4px));
        min-height: var(--topbar-sync-chrome-h, calc(var(--topbar-chrome-h) - 4px));
        padding: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        border: none;
    }

    html[data-theme="dark"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked {
        background: transparent;
        border: none;
    }

    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .topbar-points-pill:not([hidden]) {
        order: 0;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        height: calc(var(--topbar-sync-chrome-h, calc(var(--topbar-chrome-h) - 4px)) - 4px);
        min-height: calc(var(--topbar-sync-chrome-h, calc(var(--topbar-chrome-h) - 4px)) - 4px);
        padding: 0 6px;
        border-radius: 8px;
        background: transparent;
        box-shadow: none;
    }

    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .topbar-points-pill .topbar-points-icon {
        display: block;
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        color: #2b7fff;
    }

    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .topbar-points-value,
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .topbar-points-pill:hover .topbar-points-value,
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .topbar-points-pill:focus-visible .topbar-points-value,
    .user-menu-wrap .topbar-points-pill:hover #topbar-points-value,
    .user-menu-wrap .topbar-points-pill:focus-visible #topbar-points-value,
    #topbar-points-pill:hover #topbar-points-value,
    #topbar-points-pill:focus-visible #topbar-points-value {
        transform: none !important;
        font-size: 13px;
    }

    /* 灵感页：顶栏不显示积分 / 资产库 / 通知 */
    html[data-mobile-topbar-user-dock] .main:has(#panel-templates.is-active) .topbar-right #asset-library-trigger,
    html[data-mobile-topbar-user-dock] .main:has(#panel-templates.is-active) .topbar-right #user-menu-notify-btn,
    html[data-mobile-topbar-user-dock] .main:has(#panel-templates.is-active) .topbar-right #topbar-points-pill,
    html[data-mobile-topbar-user-dock] .main:has(#panel-templates.is-active) .user-menu-wrap .topbar-points-pill {
        display: none !important;
    }

    /* 灵感页：弹出卡片改白底 */
    html[data-theme="light"]:has(#panel-templates.is-active) {
        --mobile-sheet-surface-bg: #fff;
    }

    html[data-theme="light"]:has(#panel-templates.is-active) .user-menu,
    html[data-theme="light"]:has(#panel-templates.is-active) #user-menu {
        --user-menu-surface-bg: #fff;
        --user-menu-surface-card-bg: #fff;
        background: #fff !important;
    }

    html[data-theme="light"]:has(#panel-templates.is-active) #user-menu .user-menu-surface-card,
    html[data-theme="light"]:has(#panel-templates.is-active) #user-menu .user-menu-profile-card,
    html[data-theme="light"]:has(#panel-templates.is-active) #asset-library-modal .asset-library-modal-card,
    html[data-theme="light"]:has(#panel-templates.is-active) .notify-dropdown.is-open #notify-popover.is-mobile-sheet,
    html[data-theme="light"]:has(#panel-templates.is-active) #points-redeem-modal .points-redeem-card,
    html[data-theme="light"]:has(#panel-templates.is-active) #feedback-modal .feedback-card,
    html[data-theme="light"]:has(#panel-templates.is-active) #login-modal .auth-card {
        background: #fff !important;
    }

    @media (prefers-color-scheme: light) {
        html[data-theme="system"]:has(#panel-templates.is-active) {
            --mobile-sheet-surface-bg: #fff;
        }

        html[data-theme="system"]:has(#panel-templates.is-active) .user-menu,
        html[data-theme="system"]:has(#panel-templates.is-active) #user-menu {
            --user-menu-surface-bg: #fff;
            --user-menu-surface-card-bg: #fff;
            background: #fff !important;
        }

        html[data-theme="system"]:has(#panel-templates.is-active) #user-menu .user-menu-surface-card,
        html[data-theme="system"]:has(#panel-templates.is-active) #user-menu .user-menu-profile-card,
        html[data-theme="system"]:has(#panel-templates.is-active) #asset-library-modal .asset-library-modal-card,
        html[data-theme="system"]:has(#panel-templates.is-active) .notify-dropdown.is-open #notify-popover.is-mobile-sheet,
        html[data-theme="system"]:has(#panel-templates.is-active) #points-redeem-modal .points-redeem-card,
        html[data-theme="system"]:has(#panel-templates.is-active) #feedback-modal .feedback-card,
        html[data-theme="system"]:has(#panel-templates.is-active) #login-modal .auth-card {
            background: #fff !important;
        }
    }

    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked {
        --user-avatar-sync-bg: var(--user-avatar-chrome-bg, #6fb5ed);
        --user-avatar-sync-fg: #ffffff;
    }

    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked #user-menu-notify-btn.is-mobile-topbar-action {
        order: 1;
    }

    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked #asset-library-trigger.is-sidebar-asset-trigger {
        order: 2;
    }

    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-avatar,
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked #user-avatar-btn {
        order: 3;
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        font-size: calc(28px * 0.42);
        background: var(--user-avatar-chrome-bg, #6fb5ed);
        color: #ffffff;
        border: none;
        box-sizing: border-box;
        border-radius: 50%;
        pointer-events: auto;
        cursor: pointer;
    }

    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked #user-avatar-btn:has(.user-avatar-img:not([hidden])) {
        /* 默认头像透明底，不要白圆片（同 04-topbar-user-shell.css） */
        background: transparent;
    }

    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked.is-points-hidden {
        width: fit-content;
        max-width: none;
        min-width: 0;
    }

    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked #user-avatar-btn .user-avatar-letter {
        font-size: calc(28px * 0.42);
        line-height: 1;
    }

    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu:not([hidden]) {
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: var(--topbar-h) !important;
        width: 100% !important;
        min-width: 0;
        max-width: none !important;
        height: calc(100dvh - var(--topbar-h));
        max-height: calc(100dvh - var(--topbar-h));
        margin: 0;
        padding-top: 0 !important;
        padding-bottom: max(12px, var(--safe-bottom));
        z-index: 225;
        box-sizing: border-box;
        border: none !important;
        border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0;
        box-shadow: var(--mobile-sheet-card-shadow);
        animation: asset-library-mobile-sheet-in 0.34s cubic-bezier(0.32, 0.72, 0, 1);
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    html.is-user-menu-sheet-open #user-menu:not([hidden]):not(.is-settings-view):not(.is-account-view):not(.is-models-view):not(.is-billing-view):not(.is-feedback-view):not(.is-notify-view) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
    }

    html[data-mobile-topbar-user-dock] .topbar .search-box:not([hidden]):not(.is-expanded):not(.is-search-click-open) {
        border-radius: 999px;
        border: none;
        background: transparent;
        opacity: 1;
    }

    html[data-mobile-topbar-user-dock] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) {
        border-radius: 14px;
        border: none;
        background: var(--bg-elev-2);
        opacity: 1;
        z-index: 225;
    }

    html[data-mobile-topbar-user-dock] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-expand,
    html[data-mobile-topbar-user-dock] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-expand input,
    html[data-mobile-topbar-user-dock] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-clear-btn:not([hidden]),
    html[data-mobile-topbar-user-dock] .topbar .search-box:not([hidden]):is(.is-expanded, .is-search-click-open) .search-submit-btn {
        opacity: 1 !important;
        transition: none;
    }

    /* 素材库弹窗：搜索收起为图标，展开为输入框 */
    #asset-library-modal .asset-library-modal-title {
        display: none !important;
    }

    #asset-library-modal .asset-library-modal-back {
        display: none !important;
    }

    #asset-library-modal .asset-library-modal-head {
        display: none !important;
    }

    #asset-library-modal .asset-library-modal-main > .asset-library-filter-bar {
        flex: 0 0 auto;
        width: auto;
        margin: 0 12px 8px;
        padding: 0;
        box-sizing: border-box;
    }

    /* 收藏/生成分区：类型筛选条样式参考素材库底部工具栏（半透明磨砂白卡、圆角 16px、距底 12px），
       悬浮显示在分区底部（悬浮于内容之上） */
    #asset-library-modal .asset-library-modal-main {
        position: relative;
    }

    #asset-library-modal .asset-library-modal-main:has(> .asset-library-modal-body > #panel-favorites:not([hidden])) > .asset-library-filter-bar {
        position: absolute;
        /* 水平居中于 section（main 中心 = section 中心 = left:50% + translateX(-50%)） */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: max-content;
        max-width: calc(100% - 28px);
        bottom: 28px;
        margin: 0;
        padding: 5px 8px;
        z-index: 6;
        border-radius: 16px;
        background: color-mix(in srgb, var(--modal-card-bg, #fff) 65%, transparent);
        box-shadow: none;
    }

    /* 悬浮筛选条遮挡补偿：收藏分区内容预留底部滚动空间
       （清空按钮为图标形式悬浮在筛选条上方右侧；筛选条 bottom:28px，按钮顶端约距底 112px）。
       原来还并列了一条 `:has(> … > #panel-generations:not([hidden]))` —— 生成分区已删。 */
    #asset-library-modal .asset-library-modal-main:has(> .asset-library-filter-bar:not([hidden])):has(> .asset-library-modal-body > #panel-favorites:not([hidden])) > .asset-library-modal-body > #panel-favorites {
        padding-bottom: 116px;
    }

    /* 分类那一格（这个容器里现在放的是「排序」「筛选」两颗胶囊）：
       不再当「灰槽 + 白胶囊」的分段控件用 —— 灰槽留着会变成一大块空底，
       所以容器透明、胶囊自己长成一颗灰底（跟类型筛选那颗「筛选 ⌄」同一档）。 */
    #asset-library-modal .asset-library-section-tabs {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 2px;
        width: max-content;
        max-width: 100%;
        min-height: 0;
        height: auto;
        padding: 0;
        border-radius: 999px;
        background: transparent;
        overflow: visible;
        scrollbar-width: none;
    }

    #asset-library-modal .asset-library-section-tabs::-webkit-scrollbar {
        display: none;
    }

    #asset-library-modal #asset-library-section-tabs-indicator {
        display: none;
    }

    #asset-library-modal .asset-library-section-tabs .tab {
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
        height: 28px;
        min-height: 28px;
        padding: 4px 11px;
        justify-content: center;
        border: none;
        border-radius: 7px;
        font-size: 12px;
        font-weight: 500;
        color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
        background: transparent !important;
        box-shadow: none !important;
    }

    #asset-library-modal .asset-library-section-tabs .tab:hover:not(.active),
    #asset-library-modal .asset-library-section-tabs .tab:focus-visible:not(.active) {
        color: var(--text-primary);
        background: color-mix(in srgb, #fff 45%, transparent) !important;
    }

    [data-theme="dark"] #asset-library-modal .asset-library-section-tabs .tab:hover:not(.active),
    [data-theme="dark"] #asset-library-modal .asset-library-section-tabs .tab:focus-visible:not(.active) {
        background: color-mix(in srgb, var(--bg-elev-1, #334155) 92%, #fff) !important;
    }

    @media (prefers-color-scheme: dark) {
        [data-theme="system"] #asset-library-modal .asset-library-section-tabs .tab:hover:not(.active),
        [data-theme="system"] #asset-library-modal .asset-library-section-tabs .tab:focus-visible:not(.active) {
            background: color-mix(in srgb, var(--bg-elev-1, #334155) 92%, #fff) !important;
        }
    }

    #asset-library-modal .asset-library-section-tabs .tab.active,
    #asset-library-modal .asset-library-section-tabs .tab.active:hover,
    #asset-library-modal .asset-library-section-tabs .tab.active:focus-visible {
        color: #000000;
        font-weight: 500;
        background: transparent !important;
        box-shadow: none !important;
    }

    [data-theme="dark"] #asset-library-modal .asset-library-section-tabs .tab.active,
    [data-theme="dark"] #asset-library-modal .asset-library-section-tabs .tab.active:hover,
    [data-theme="dark"] #asset-library-modal .asset-library-section-tabs .tab.active:focus-visible {
        color: #ffffff;
    }

    @media (prefers-color-scheme: dark) {
        [data-theme="system"] #asset-library-modal .asset-library-section-tabs .tab.active,
        [data-theme="system"] #asset-library-modal .asset-library-section-tabs .tab.active:hover,
        [data-theme="system"] #asset-library-modal .asset-library-section-tabs .tab.active:focus-visible {
            color: #ffffff;
        }
    }

    /* 分类那格的触发键（连同它身上的尺寸规则）已按需求整颗删除 ——
       入口换成侧栏标题那颗 h2（见 11-auth-boot.js 的 setCloudStorageCategoryPanelOpen）。
       这一格窄屏现在只放「排序」「筛选」两颗胶囊，次序 **排序 → 筛选**。 */

    /* 窄屏：「排序」「筛选」两颗胶囊搬进分类那一格
       （需求：「移到 @button#asset-library-category-trigger 右边」
       +「@button#cloud-storage-sort-trigger 移到 @button#asset-library-category-trigger 左边」，
       本轮触发键删除后它们就是这一排的两件）。
       尺寸/圆角/配色沿用它们自己的胶囊规则（34px / 999px / 浅灰底），
       这里只补两件那排里才需要的事：
       1. `flex: 0 0 auto` —— 那排是 nowrap，默认 flex:0 1 auto 会被压扁；
       2. **内衬 14 → 10、箭头收掉**：这排右边还坐着搜索键，宽度得省着用。
          原来三颗 + 搜索键一共 302px，超过 341px 机上的可用宽度（约 281px），
          「排序」会压在搜索键上（实测过）；现在只剩两颗，320px 机上也放得下。
          箭头只是「能展开」的提示，胶囊本身仍是按钮；桌面端那份不受影响。 */
    #asset-library-modal .asset-library-section-tabs > .cloud-storage-filter-trigger {
        flex: 0 0 auto;
        padding: 0 10px;
    }

    #asset-library-modal .asset-library-section-tabs > .cloud-storage-filter-trigger .cloud-storage-filter-trigger-caret {
        display: none;
    }

    /* 间距：那排 gap 只有 2px，两颗胶囊贴一起分不出边界，撑到 8px
       —— row 左缘仍跟标题 / 文件夹区对齐（原来三颗时才要按左右各补 6px 的写法）。 */
    #asset-library-modal .asset-library-section-tabs {
        gap: 8px;
    }

    #asset-library-modal .asset-library-modal-body > .asset-library-section.is-section-enter-right {
        animation: asset-library-section-enter-right 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }

    #asset-library-modal .asset-library-modal-body > .asset-library-section.is-section-enter-left {
        animation: asset-library-section-enter-left 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }

    @keyframes asset-library-section-enter-right {
        from {
            opacity: 0.35;
            transform: translate3d(16%, 0, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes asset-library-section-enter-left {
        from {
            opacity: 0.35;
            transform: translate3d(-16%, 0, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #asset-library-modal .asset-library-modal-body > .asset-library-section.is-section-enter-right,
        #asset-library-modal .asset-library-modal-body > .asset-library-section.is-section-enter-left {
            animation: none;
        }
    }

    #asset-library-modal .asset-library-search-btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        background: transparent;
        color: var(--text-secondary);
        transition: color 0.15s ease;
    }

    #asset-library-modal .asset-library-search-btn:hover,
    #asset-library-modal .asset-library-search-btn:focus-visible,
    #asset-library-modal .asset-library-search-btn:active {
        background: transparent !important;
        color: var(--text-primary);
    }

    #asset-library-modal .asset-library-modal-head {
        display: none !important;
    }

    #asset-library-modal .asset-library-modal-head-leading {
        display: none;
    }

    #asset-library-modal .asset-library-section-tabs {
        pointer-events: auto;
        flex: 0 1 auto;
        width: max-content;
        min-width: 0;
        max-width: 100%;
    }

    #asset-library-modal .asset-library-section-tabs .tab {
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
        justify-content: center;
    }

    /* 搜索键铺开时，那一排（分类入口那颗标题 + 两颗胶囊）整排让位，
       否则会跟铺开的搜索框抢位置 */
    #asset-library-modal:has(.asset-library-search-box.is-expanded) #asset-library-section-tabs,
    #asset-library-modal:has(.asset-library-search-box.is-search-click-open) #asset-library-section-tabs,
    html[data-asset-library-search-open] #asset-library-modal #asset-library-section-tabs,
    #asset-library-modal:has(.asset-library-search-box.is-expanded) .asset-library-modal-sidebar-head,
    #asset-library-modal:has(.asset-library-search-box.is-search-click-open) .asset-library-modal-sidebar-head,
    html[data-asset-library-search-open] #asset-library-modal .asset-library-modal-sidebar-head {
        display: none !important;
    }

    #asset-library-modal .asset-library-search-box {
        flex: 0 0 var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height));
        width: var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height));
        min-width: var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height));
        max-width: var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height));
        height: var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height));
        min-height: var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height));
        background: transparent;
        box-shadow: none;
    }

    #asset-library-modal .asset-library-search-box.is-search-pinned-open:not(.is-expanded):not(.is-search-click-open) {
        flex: 0 0 var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height));
        width: var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height));
        min-width: var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height));
        max-width: var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height));
    }

    #asset-library-modal .asset-library-modal-head-actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        position: static;
        flex: 0 0 auto;
        margin-left: 0;
        margin-right: 0;
        min-width: 0;
        z-index: 3;
    }

    #asset-library-modal .asset-library-search-box:not(.is-expanded):not(.is-search-click-open) {
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        z-index: 3;
        margin: 0;
        background: transparent;
        box-shadow: none;
        /* 收起态的搜索键跟旁边三颗胶囊同高（34px）
           （需求：「@button#asset-library-search-btn 高度改成 34px」）。
           按钮本身是「100% 撑满搜索盒」（见上面那条 width/height:100%），
           所以改的是盒子；宽度一起给 34 —— 不然 999px 圆角会变椭圆。
           展开态（输入框那一排）不动：那条走 width/height: auto + 自己的锚点宽度。 */
        flex: 0 0 34px;
        width: 34px;
        min-width: 34px;
        max-width: 34px;
        height: 34px;
        min-height: 34px;
    }

    /* 第 622 轮：搜索键右边多了那颗「更多」圆钮（34px + 6px 空档），收起 / 展开两态都得让出
       12 + 40 = 52 —— 不让的话展开的胶囊会把它压在下面，那颗搜索键就点不着了。
       ⚠️ 展开态那条的锚点走的是 `--asset-library-search-expand-anchor-right`，可它被 JS 写在了
       `.asset-library-modal-head` 上，而搜索盒根本不在这棵树里（它在侧栏里）—— 那条变量在手机端
       一直是空值（右锚点=0，胶囊铺满整行）。这里直接按宽度写死，不去动那套锚点。 */
    #asset-library-modal .asset-library-modal-layout .asset-library-modal-sidebar > .asset-library-search-box:not(.is-expanded):not(.is-search-click-open) {
        right: 0;
        margin-right: 52px;
    }

    /* 展开态：手机端这颗盒子是**流内**的（`position: relative` + `flex: 1 1 auto`，不是绝对定位），
       所以让位靠 `margin-right` —— 右缘停在更多键左边一格。
       ⚠️ 别写 `right: 52px`：相对定位的盒子上它只会把整颗往左挪；`max-width` 也别留着
       （手机端那支 `--asset-library-search-expand-w` 是电脑端算的，撑出去会左溢出，实测 x=-40）。
       ⚠️ 第 625 轮（需求：「搜索框宽度不要超过 @section#panel-materials 的左边」）：
       左缘原来顶到侧栏左缘（x=12），比内容区还多出 24px；现在按**素材分区左缘**收住
       —— `margin-left: 24px` = body 的 12px 外边距 + 12px 内边距（见上面 `.asset-library-modal-body` 那条），
       于是盒子是 36..301（宽 265），左端与 #panel-materials / 网格左缘（x=36 / 46）对齐。 */
    #asset-library-modal .asset-library-modal-layout .asset-library-modal-sidebar > .asset-library-search-box:is(.is-expanded, .is-search-click-open) {
        margin-left: 24px;
        margin-right: 52px;
        max-width: none;
        min-width: 0;
    }

    #asset-library-modal .asset-library-search-box:is(.is-expanded, .is-search-click-open) {
        position: absolute;
        top: 50%;
        right: var(--asset-library-search-expand-anchor-right, 0);
        left: auto;
        transform: translateY(-50%);
        flex: 0 0 auto;
        width: var(--asset-library-search-expand-w, var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height)));
        min-width: var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height));
        max-width: min(
            var(--asset-library-search-expand-w, var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height))),
            calc(100% - var(--asset-library-search-expand-left-bound, 0px) - var(--asset-library-search-expand-anchor-right, 0px) - 40px)
        );
        height: var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height));
        min-height: var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height));
        margin: 0;
        padding: 0 9px;
        gap: 4px;
        justify-content: flex-start;
        overflow: hidden;
        z-index: 3;
        /* 第 625 轮（需求：「点击后的样式参考对话列表的搜索框」）——
           原来是一颗 10px 圆角、`--bg-elev-2`（7% 墨半透明）的浅灰槽；
           改成与「对话列表」那颗展开态搜索框同一副长相：整颗胶囊 + **不透明**面底
           （半透明会把底下的网格/标题透出来）。
           第 630 轮（需求：「@div#asset-library-search-box 高度减少 4px，去除阴影添加边框」）：
           那层 `0 2px 10px rgba(0,0,0,.12)` 投影换成 1px 实边框（--border-soft）。
           高度那 4px 记在下面那条手机壳规则里（34 → 30；这条的 height 会被那条更高权重的
           「三颗控件统一 34px」压住，写在这里没用）。 */
        border-radius: 999px;
        border: 1px solid var(--border-soft, rgba(0, 0, 0, 0.08));
        background: var(--panel-surface-bg, #ffffff);
        box-shadow: none;
        transition: width 0.2s ease;
    }

    /* 第 630 轮：「高度减少 4px」——只在展开态那颗胶囊上减（收起态那颗 34×34 的搜索键
       要跟右边同样 34×34 的「更多」键对齐，不能缩）。中心仍然对齐：矮了 4px 就往下挪 2px，
       不然 pills 的中线会比同行那两颗键高 2px。
       ⚠️ 权重算到 (1,5,1)，压得住第 623 轮那条「三颗控件统一 top:0 / 34px」的 (1,4,1)。 */
    html[data-mobile-home-chat-shell] #asset-library-modal .asset-library-modal-layout .asset-library-modal-sidebar > .asset-library-search-box:is(.is-expanded, .is-search-click-open) {
        top: 2px;
        height: 30px;
        min-height: 30px;
    }

    #asset-library-modal .asset-library-search-box:not(.is-expanded):not(.is-search-click-open) .asset-library-search-clear-btn {
        display: none !important;
    }

    #asset-library-modal .asset-library-search-box:not(.is-expanded):not(.is-search-click-open) .asset-library-search-input,
    #asset-library-modal .asset-library-search-box:not(.is-expanded):not(.is-search-click-open) .asset-library-search-submit-btn {
        display: none !important;
    }

    #asset-library-modal .asset-library-search-box:is(.is-expanded, .is-search-click-open) .asset-library-search-btn {
        order: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin: 0;
        border-radius: 0;
        background: transparent;
        color: var(--text-secondary);
    }

    #asset-library-modal .asset-library-search-box:is(.is-expanded, .is-search-click-open) .asset-library-search-btn svg {
        /* 第 996 轮：跟着基础规则一起到 18px（原来 16 —— 收起 18 / 展开 16 会在切换时跳一下） */
        width: 18px;
        height: 18px;
    }

    #asset-library-modal .asset-library-search-box:is(.is-expanded, .is-search-click-open) .asset-library-search-input {
        display: block;
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        opacity: 1 !important;
    }

    #asset-library-modal .asset-library-search-box:is(.is-expanded, .is-search-click-open) .asset-library-search-input::placeholder {
        /* 第 625 轮：跟「对话列表」那颗搜索框的占位色对齐（原来是 --text-tertiary） */
        color: var(--text-secondary);
    }

    #asset-library-modal .asset-library-search-box:is(.is-expanded, .is-search-click-open).has-search-text .asset-library-search-clear-btn {
        display: inline-flex !important;
        visibility: visible !important;
        order: 2;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: calc(var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height)) - 4px);
        height: calc(var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height)) - 4px);
        min-width: calc(var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height)) - 4px);
        min-height: calc(var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height)) - 4px);
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: var(--text-secondary);
        pointer-events: auto;
        opacity: 1 !important;
    }

    #asset-library-modal .asset-library-search-box:is(.is-expanded, .is-search-click-open).has-search-text .asset-library-search-clear-btn svg {
        width: 16px;
        height: 16px;
    }

    #asset-library-modal .asset-library-search-box:is(.is-expanded, .is-search-click-open) .asset-library-search-submit-btn {
        display: inline-flex !important;
        order: 3;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: calc(var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height)) - 4px);
        min-height: calc(var(--topbar-sync-chrome-h, var(--filter-tabs-tab-height)) - 4px);
        margin: 0;
        padding: 0 8px;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--text-primary);
        font: inherit;
        font-size: var(--filter-tabs-tab-font-size, 13px);
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
    }

    #asset-library-modal .asset-library-filter-bar .filter-tabs,
    #asset-library-modal .asset-library-filter-bar .favorites-filter-tabs {
        min-height: 30px;
        padding: 0;
        gap: 4px;
        border-radius: 0;
        background: transparent;
        width: max-content;
        max-width: 100%;
        --filter-tabs-indicator-radius: 999px;
        --filter-tabs-indicator-bg: var(--filter-tabs-tab-bg, color-mix(in srgb, var(--text-primary) 10%, transparent));
        --filter-tabs-indicator-shadow: none;
    }

    #asset-library-modal .asset-library-filter-bar .filter-tab,
    #asset-library-modal .asset-library-filter-bar .filter-tab:focus,
    #asset-library-modal .asset-library-filter-bar .filter-tab:active,
    [data-theme="dark"] #asset-library-modal .asset-library-filter-bar .filter-tab {
        height: 30px;
        min-height: 30px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 400;
        color: var(--text-secondary);
        background: transparent;
        box-shadow: none;
        border-bottom: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    #asset-library-modal .asset-library-filter-bar .filter-tab:hover:not(.active),
    #asset-library-modal .asset-library-filter-bar .filter-tab:focus-visible:not(.active) {
        color: var(--text-secondary);
        background: var(--filter-tabs-tab-bg, color-mix(in srgb, var(--text-primary) 10%, transparent));
    }

    #asset-library-modal .asset-library-filter-bar .filter-tab.active,
    #asset-library-modal .asset-library-filter-bar .filter-tab.active:hover,
    #asset-library-modal .asset-library-filter-bar .filter-tab.active:focus,
    #asset-library-modal .asset-library-filter-bar .filter-tab.active:focus-visible,
    #asset-library-modal .asset-library-filter-bar .filter-tab.active:active,
    [data-theme="dark"] #asset-library-modal .asset-library-filter-bar .filter-tab.active,
    [data-theme="dark"] #asset-library-modal .asset-library-filter-bar .filter-tab.active:hover,
    [data-theme="dark"] #asset-library-modal .asset-library-filter-bar .filter-tab.active:focus-visible {
        background: transparent !important;
        color: #000000 !important;
        font-weight: 500;
        box-shadow: none;
        border-bottom: none !important;
    }

    [data-theme="dark"] #asset-library-modal .asset-library-filter-bar .filter-tab.active,
    [data-theme="dark"] #asset-library-modal .asset-library-filter-bar .filter-tab.active:hover,
    [data-theme="dark"] #asset-library-modal .asset-library-filter-bar .filter-tab.active:focus-visible {
        color: #ffffff !important;
    }

    @media (prefers-color-scheme: dark) {
        [data-theme="system"] #asset-library-modal .asset-library-filter-bar .filter-tab.active,
        [data-theme="system"] #asset-library-modal .asset-library-filter-bar .filter-tab.active:hover,
        [data-theme="system"] #asset-library-modal .asset-library-filter-bar .filter-tab.active:focus-visible {
            color: #ffffff !important;
        }
    }

    #asset-library-modal .asset-library-filter-bar .filter-tabs.has-sliding-indicator .filter-tab.active,
    #asset-library-modal .asset-library-filter-bar .filter-tabs.has-sliding-indicator .filter-tab.active:hover,
    #asset-library-modal .asset-library-filter-bar .filter-tabs.has-sliding-indicator .filter-tab.active:focus,
    #asset-library-modal .asset-library-filter-bar .filter-tabs.has-sliding-indicator .filter-tab.active:focus-visible,
    #asset-library-modal .asset-library-filter-bar .filter-tabs.has-sliding-indicator .filter-tab.active:active,
    [data-theme="dark"] #asset-library-modal .asset-library-filter-bar .filter-tabs.has-sliding-indicator .filter-tab.active,
    [data-theme="dark"] #asset-library-modal .asset-library-filter-bar .filter-tabs.has-sliding-indicator .filter-tab.active:hover,
    [data-theme="dark"] #asset-library-modal .asset-library-filter-bar .filter-tabs.has-sliding-indicator .filter-tab.active:focus-visible {
        background: transparent !important;
        box-shadow: none;
    }

    #asset-library-modal .asset-library-filter-bar {
        justify-content: center;
        padding: 0;
        background: transparent;
    }

    #asset-library-modal .asset-library-filter-bar-inner {
        /* 第 562 轮：与桌面同一条口径 —— 撑满整条，那颗「筛选 ▾」靠 margin-left:auto 靠右 */
        width: 100%;
        max-width: none;
        gap: 8px;
        align-items: center;
    }

    #asset-library-modal .asset-library-filter-bar .filter-tabs,
    #asset-library-modal .asset-library-filter-bar .favorites-filter-tabs {
        flex: 0 0 auto;
        width: max-content;
        min-width: 0;
        max-width: none;
    }

    /* 清空按钮：纯图标形式，悬浮在筛选条正上方居中（与筛选条同款磨砂圆钮） */
    #asset-library-modal .asset-library-filter-clear-btn {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        transform: translateX(-50%);
        flex: 0 0 auto;
        order: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--modal-card-bg, #fff) 65%, transparent);
        box-shadow: none;
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        border: none;
        -webkit-tap-highlight-color: transparent;
        z-index: 7;
        white-space: nowrap;
    }

    #asset-library-modal .asset-library-filter-clear-btn .asset-library-filter-clear-btn-label {
        display: none;
    }

    #asset-library-modal .asset-library-filter-clear-btn:hover,
    #asset-library-modal .asset-library-filter-clear-btn:focus-visible,
    #asset-library-modal .asset-library-filter-clear-btn:active {
        color: var(--text-primary);
        background: color-mix(in srgb, var(--text-primary) 10%, var(--modal-card-bg, #fff));
        box-shadow: none;
    }

    #asset-library-modal .asset-library-filter-clear-btn svg {
        width: 18px;
        height: 18px;
    }

    #asset-library-modal .prompt-library-sidebar-head {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    #asset-library-modal .prompt-library-sidebar-head #prompt-library-new-category.materials-toolbar-btn {
        width: auto;
        flex: 0 0 auto;
        background: #ffffff;
        color: var(--text-primary);
    }

    #asset-library-modal .materials-toolbar-btn#prompt-library-new-category:hover:not(:disabled),
    #asset-library-modal .materials-toolbar-btn#prompt-library-new-category:focus-visible:not(:disabled) {
        background: var(--filter-tabs-tab-hover-bg);
    }

    /* 下拉/菜单不超出屏幕 */
    .chip-dropdown-menu,
    .model-menu-panel,
    .settings-popover,
    .quick-tag-menu {
        max-width: min(320px, calc(100vw - 24px - var(--safe-left) - var(--safe-right)));
    }

    .user-menu:not([hidden]) {
        max-width: none !important;
    }

    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu:not([hidden]),
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu:not([hidden]),
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu:not([hidden]),
    html[data-mobile-home-chat-shell] #panel-home .hero,
    #points-redeem-modal .points-redeem-card,
    #feedback-modal .feedback-card,
    #login-modal .auth-card {
        border: none;
    }

    html.is-user-menu-sheet-open #user-menu .user-menu-sheet-head {
        display: none !important;
    }

    html.is-user-menu-sheet-open #user-menu .user-menu-settings-head .user-menu-settings-back,
    html.is-user-menu-sheet-open #user-menu .user-menu-settings-head .user-menu-settings-title {
        display: none;
    }

    html.is-user-menu-sheet-open #user-menu.is-account-view .user-menu-settings-head,
    html.is-user-menu-sheet-open #user-menu.is-models-view .user-menu-settings-head,
    html.is-user-menu-sheet-open #user-menu.is-billing-view .user-menu-settings-head,
    html.is-user-menu-sheet-open #user-menu.is-feedback-view .user-menu-settings-head,
    html.is-user-menu-sheet-open #user-menu.is-notify-view .user-menu-settings-head {
        display: none;
    }

    html.is-user-menu-sheet-open #user-menu.is-settings-view .user-menu-settings-head {
        display: none;
    }

    .user-menu-settings-head {
        border-bottom: none;
    }

    html[data-theme="dark"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-settings-view:not([hidden]) .user-menu-settings-head,
    html[data-theme="dark"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-account-view:not([hidden]) .user-menu-settings-head,
    html[data-theme="dark"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-billing-view:not([hidden]) .user-menu-settings-head,
    html[data-theme="dark"].is-user-menu-sheet-open #user-menu .user-menu-sheet-head,
    html[data-theme="dark"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-settings-view:not([hidden]) .user-menu-settings-head,
    html[data-theme="dark"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-account-view:not([hidden]) .user-menu-settings-head,
    html[data-theme="dark"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-billing-view:not([hidden]) .user-menu-settings-head,
    html[data-theme="dark"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-settings-view:not([hidden]) .user-menu-settings-head,
    html[data-theme="dark"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-account-view:not([hidden]) .user-menu-settings-head,
    html[data-theme="dark"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-billing-view:not([hidden]) .user-menu-settings-head,
    html[data-theme="dark"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-settings-view:not([hidden]) .user-menu-settings-body.settings-popover-body,
    html[data-theme="dark"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-account-view:not([hidden]) #user-account-settings-body,
    html[data-theme="dark"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-billing-view:not([hidden]) #user-billing-body,
    html[data-theme="dark"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-settings-view:not([hidden]) .user-menu-settings-body.settings-popover-body,
    html[data-theme="dark"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-account-view:not([hidden]) #user-account-settings-body,
    html[data-theme="dark"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-billing-view:not([hidden]) #user-billing-body,
    html[data-theme="dark"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-settings-view:not([hidden]) .user-menu-settings-body.settings-popover-body,
    html[data-theme="dark"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-account-view:not([hidden]) #user-account-settings-body,
    html[data-theme="dark"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-billing-view:not([hidden]) #user-billing-body {
        background: var(--user-menu-surface-bg, #121212);
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-settings-view:not([hidden]) .user-menu-settings-head,
        html[data-theme="system"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-account-view:not([hidden]) .user-menu-settings-head,
        html[data-theme="system"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-billing-view:not([hidden]) .user-menu-settings-head,
        html[data-theme="system"].is-user-menu-sheet-open #user-menu .user-menu-sheet-head,
        html[data-theme="system"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-settings-view:not([hidden]) .user-menu-settings-head,
        html[data-theme="system"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-account-view:not([hidden]) .user-menu-settings-head,
        html[data-theme="system"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-billing-view:not([hidden]) .user-menu-settings-head,
        html[data-theme="system"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-settings-view:not([hidden]) .user-menu-settings-head,
        html[data-theme="system"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-account-view:not([hidden]) .user-menu-settings-head,
        html[data-theme="system"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-billing-view:not([hidden]) .user-menu-settings-head,
        html[data-theme="system"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-settings-view:not([hidden]) .user-menu-settings-body.settings-popover-body,
        html[data-theme="system"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-account-view:not([hidden]) #user-account-settings-body,
        html[data-theme="system"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-billing-view:not([hidden]) #user-billing-body,
        html[data-theme="system"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-settings-view:not([hidden]) .user-menu-settings-body.settings-popover-body,
        html[data-theme="system"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-account-view:not([hidden]) #user-account-settings-body,
        html[data-theme="system"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-billing-view:not([hidden]) #user-billing-body,
        html[data-theme="system"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-settings-view:not([hidden]) .user-menu-settings-body.settings-popover-body,
        html[data-theme="system"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-account-view:not([hidden]) #user-account-settings-body,
        html[data-theme="system"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-billing-view:not([hidden]) #user-billing-body {
            background: var(--user-menu-surface-bg, #121212);
        }
    }

    /* 偏好设置 / 账号 / 账单：头部与内容区背景跟随卡片表面（与 mobile-sheet-dismiss-zone 一致） */
    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-settings-view:not([hidden]) .user-menu-settings-head,
    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-account-view:not([hidden]) .user-menu-settings-head,
    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-billing-view:not([hidden]) .user-menu-settings-head,
    html.is-user-menu-sheet-open #user-menu .user-menu-sheet-head,
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-settings-view:not([hidden]) .user-menu-settings-head,
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-account-view:not([hidden]) .user-menu-settings-head,
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-billing-view:not([hidden]) .user-menu-settings-head,
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-settings-view:not([hidden]) .user-menu-settings-head,
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-account-view:not([hidden]) .user-menu-settings-head,
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-billing-view:not([hidden]) .user-menu-settings-head,
    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-settings-view:not([hidden]) .user-menu-settings-body.settings-popover-body,
    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-account-view:not([hidden]) #user-account-settings-body,
    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-billing-view:not([hidden]) #user-billing-body,
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-settings-view:not([hidden]) .user-menu-settings-body.settings-popover-body,
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-account-view:not([hidden]) #user-account-settings-body,
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-billing-view:not([hidden]) #user-billing-body,
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-settings-view:not([hidden]) .user-menu-settings-body.settings-popover-body,
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-account-view:not([hidden]) #user-account-settings-body,
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-billing-view:not([hidden]) #user-billing-body {
        background: var(--user-menu-surface-bg, #fdf8f8);
    }

    /* 手机端：卡片顶边以上灰色遮罩（不模糊） */
    .user-menu-backdrop:not([hidden]),
    html.is-notify-sheet-open .user-menu-backdrop:not([hidden]) {
        top: 0;
        z-index: 220;
        pointer-events: auto;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--mobile-sheet-scrim-bg, rgba(0, 0, 0, 0.42));
    }

    /* 手机端：卡片顶边以上灰色遮罩（不模糊）。
       ⚠️ 素材库这一轮已经改成**毛玻璃遮罩**（需求：「资产库界面以外的界面改成毛玻璃遮罩」），
       所以它从这一组里撑出去了，自己那套在 24-asset-library.css 里，别又加回来。 */
    #points-redeem-modal.modal.show .modal-overlay,
    #feedback-modal.modal.show .modal-overlay,
    #login-modal.modal.show .modal-overlay,
    #payment-modal.modal.show .modal-overlay,
    #quick-prompt-modal.modal.show .modal-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--mobile-sheet-scrim-bg, rgba(0, 0, 0, 0.42));
    }

    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu:not([hidden]),
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu:not([hidden]),
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu:not([hidden]),
    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-settings-view:not([hidden]),
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-settings-view:not([hidden]),
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-settings-view:not([hidden]),
    #points-redeem-modal .points-redeem-card,
    #feedback-modal .feedback-card,
    #login-modal .auth-card,
    #payment-modal .payment-card,
    #asset-library-modal .asset-library-modal-card,
    #asset-library-modal .asset-library-modal-card.is-maximized,
    .mobile-prompt-sheet-card {
        background: var(--mobile-sheet-surface-bg, var(--panel-surface-bg, var(--modal-card-bg)));
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* 第 1561 轮（需求）：「移动端：@section（section.hero）背景色要和主题色一致」
       —— 上面这一组里原来还带着 `html[data-mobile-home-chat-shell] #panel-home .hero`，
       它用 `--mobile-sheet-surface-bg`（浅色下 = #fff）把这层 sheet 铺成白的，
       正好盖掉了文件前面的那条 `background: var(--bg-base, #fff)`（见上面「底色跟主题色走」
       那段注释）。手机端整块对话区因此在白底上、跟页面主题色分成两层。
       现在 hero 从这一组里摘出来：它的底色只认 --bg-base，跟电脑端 #panel-home .hero 一致。
       ⚠️ 别再把 hero 加回这一组。 */

    .notify-dropdown.is-open #notify-popover.is-mobile-sheet,
    #notify-popover.is-mobile-sheet {
        background: var(--mobile-sheet-surface-bg, var(--user-menu-surface-bg, #fff)) !important;
        padding-inline: 12px;
        padding-bottom: max(12px, var(--safe-bottom));
        border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0;
        overflow: hidden;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: var(--mobile-sheet-card-shadow, none);
    }

    [data-theme="dark"] .notify-dropdown.is-open #notify-popover.is-mobile-sheet,
    [data-theme="dark"] #notify-popover.is-mobile-sheet {
        background: var(--mobile-sheet-surface-bg, var(--user-menu-surface-bg, #121212)) !important;
    }

    @media (prefers-color-scheme: dark) {
        [data-theme="system"] .notify-dropdown.is-open #notify-popover.is-mobile-sheet,
        [data-theme="system"] #notify-popover.is-mobile-sheet {
            background: var(--mobile-sheet-surface-bg, var(--user-menu-surface-bg, #121212)) !important;
        }
    }

    .notify-dropdown.is-open #notify-popover.is-mobile-sheet .notify-popover-header {
        border-bottom: none;
        padding: 10px 40px 10px 4px;
        background: transparent;
    }

    .notify-dropdown.is-open #notify-popover.is-mobile-sheet .notify-popover-close,
    #notify-popover.is-mobile-sheet .notify-popover-close {
        display: none !important;
    }

    .notify-dropdown.is-open #notify-popover.is-mobile-sheet .notify-popover-body {
        margin: 0;
        flex: 1 1 auto;
        min-height: 0;
    }

    [data-theme="light"] .notify-dropdown.is-open #notify-popover.is-mobile-sheet .notify-popover-body {
        background: var(--user-menu-surface-card-bg, #ffffff);
    }

    [data-theme="dark"] .notify-dropdown.is-open #notify-popover.is-mobile-sheet .notify-popover-body,
    [data-theme="dark"] #notify-popover.is-mobile-sheet .notify-popover-body {
        background: var(--user-menu-surface-card-bg, #202020);
    }

    @media (prefers-color-scheme: light) {
        [data-theme="system"] .notify-dropdown.is-open #notify-popover.is-mobile-sheet .notify-popover-body {
            background: var(--user-menu-surface-card-bg, #ffffff);
        }
    }

    @media (prefers-color-scheme: dark) {
        [data-theme="system"] .notify-dropdown.is-open #notify-popover.is-mobile-sheet .notify-popover-body,
        [data-theme="system"] #notify-popover.is-mobile-sheet .notify-popover-body {
            background: var(--user-menu-surface-card-bg, #202020);
        }
    }

    /* 手机端个人中心：卡片/分组色板与桌面端 user-menu token 一致（见 04-topbar-user-shell.css） */
    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu:not([hidden]),
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu:not([hidden]),
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu:not([hidden]) {
        --user-menu-sheet-back-bg: color-mix(in srgb, var(--user-menu-surface-card-bg) 70%, transparent);
        --user-menu-sheet-back-bg-hover: color-mix(in srgb, var(--user-menu-surface-card-bg) 85%, transparent);
        background: var(--user-menu-surface-bg) !important;
        padding-top: 0 !important;
        padding-inline: 12px;
        box-shadow: var(--mobile-sheet-card-shadow);
    }

    html[data-theme="light"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu:not([hidden]),
    html[data-theme="light"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu:not([hidden]),
    html[data-theme="light"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu:not([hidden]) {
        --user-menu-surface-bg: #fff;
        background: #fff !important;
    }

    @media (prefers-color-scheme: light) {
        html[data-theme="system"]:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu:not([hidden]),
        html[data-theme="system"][data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu:not([hidden]),
        html[data-theme="system"][data-workflow-active] .topbar-right .user-menu-wrap .user-menu:not([hidden]) {
            --user-menu-surface-bg: #fff;
            background: #fff !important;
        }
    }

    #user-menu .user-menu-profile-card,
    #user-menu .user-menu-surface-card,
    #user-menu .settings-card.user-menu-surface-card,
    #user-menu .user-account-meta.user-menu-surface-card,
    #user-menu .user-account-form.user-menu-surface-card,
    #user-menu .user-menu-billing-card.user-menu-surface-card,
    #user-menu .user-menu-feedback-card.user-menu-surface-card {
        background: var(--user-menu-surface-card-bg) !important;
        border: none;
        border-radius: var(--user-menu-radius, 24px);
        box-shadow: none;
    }

    #user-menu .user-menu-hero,
    #user-menu .user-menu-pane-main {
        padding-inline: 0;
    }

    #user-menu .user-menu-hero {
        padding-top: 2px;
        padding-bottom: 8px;
    }

    #user-menu .user-menu-profile-card {
        min-height: 0;
        padding: 8px 14px;
        gap: 10px;
    }

    #user-menu .user-menu-hero .user-menu-header-avatar {
        --user-menu-header-avatar-size: 48px;
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        flex-basis: 48px;
        font-size: 20px;
    }

    #user-menu .user-menu-sub-body,
    #user-menu .user-menu-settings-body.settings-popover-body,
    #user-menu #settings-popover-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 0 12px;
        background: var(--user-menu-surface-bg) !important;
    }

    #user-menu .user-account-meta.user-menu-surface-card {
        margin: 0;
        padding-block: 4px;
        gap: 0;
        overflow: hidden;
    }

    #user-menu .user-account-meta.user-menu-surface-card .user-account-meta-row {
        position: relative;
        padding: 12px 16px;
    }

    #user-menu .user-account-meta.user-menu-surface-card .user-account-meta-row:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 0;
        height: 0.5px;
        background: rgba(60, 60, 67, 0.16);
        pointer-events: none;
    }

    [data-theme="dark"] #user-menu .user-account-meta.user-menu-surface-card .user-account-meta-row:not(:last-child)::after {
        background: rgba(255, 255, 255, 0.12);
    }

    @media (prefers-color-scheme: dark) {
        [data-theme="system"] #user-menu .user-account-meta.user-menu-surface-card .user-account-meta-row:not(:last-child)::after {
            background: rgba(255, 255, 255, 0.12);
        }
    }

    #user-menu .user-account-form.user-menu-surface-card {
        padding: 14px 16px;
        gap: 12px;
    }

    #user-menu .user-menu-billing-card.user-menu-surface-card {
        padding-block: 4px;
        flex-shrink: 0;
        overflow: visible;
    }

    #user-menu .user-menu-billing-card.user-menu-surface-card .user-billing-section {
        position: relative;
        margin: 0;
        padding: 12px 16px;
    }

    #user-menu .user-menu-billing-card.user-menu-surface-card .user-billing-section + .user-billing-section {
        margin-top: 0;
        padding-top: 12px;
        border-top: none;
    }

    #user-menu .user-menu-billing-card.user-menu-surface-card .user-billing-section + .user-billing-section::before {
        content: "";
        position: absolute;
        left: 16px;
        right: 16px;
        top: 0;
        height: 0.5px;
        background: rgba(60, 60, 67, 0.16);
        pointer-events: none;
    }

    [data-theme="dark"] #user-menu .user-menu-billing-card.user-menu-surface-card .user-billing-section + .user-billing-section::before {
        background: rgba(255, 255, 255, 0.12);
    }

    @media (prefers-color-scheme: dark) {
        [data-theme="system"] #user-menu .user-menu-billing-card.user-menu-surface-card .user-billing-section + .user-billing-section::before {
            background: rgba(255, 255, 255, 0.12);
        }
    }

    #user-menu .user-menu-billing-card.user-menu-surface-card .user-billing-item {
        padding: 10px 0 0;
        border-radius: 0;
        background: transparent;
    }

    #user-menu .user-menu-feedback-card.user-menu-surface-card {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 16px;
        gap: 12px;
    }

    #user-menu .user-menu-feedback-card.user-menu-surface-card .user-feedback-hint {
        margin: 0;
    }

    #user-menu .settings-card.user-menu-surface-card {
        display: block;
    }

    #user-menu.is-settings-view .user-menu-settings-body .settings-card-group {
        gap: 6px;
    }

    #user-menu .user-menu-profile-card,
    #user-menu .user-menu-nav,
    #user-menu .user-menu-preferences .theme-mode-switch,
    #user-menu .user-menu-preferences .theme-mode-switch:hover,
    #user-menu .user-menu-preferences .settings-lang-trigger,
    #user-menu .user-menu-preferences .settings-lang-dropdown.is-open .settings-lang-trigger,
    #user-menu .user-menu-preferences .settings-lang-menu,
    #user-menu .user-menu-preferences .user-menu-page-bg-reset,
    #user-menu .user-menu-preferences .user-menu-page-bg-reset:hover {
        box-shadow: none !important;
    }

    /* 兑换码弹窗：手机端与首页 hero 卡片同高 */
    #points-redeem-modal.modal.show {
        align-items: flex-end;
        justify-content: stretch;
    }

    #feedback-modal.modal.show,
    #login-modal.modal.show,
    #payment-modal.modal.show {
        align-items: flex-end;
        justify-content: stretch;
    }

    #feedback-modal .feedback-card,
    #payment-modal .payment-card {
        position: fixed;
        top: var(--mobile-sheet-panel-top) !important;
        right: 0;
        left: 0;
        bottom: 0 !important;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: var(--mobile-sheet-panel-h);
        margin: 0;
        padding: 24px 20px max(16px, calc(16px + var(--safe-bottom)));
        transform: none;
        border: none;
        border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0;
        overflow: hidden;
        overscroll-behavior: contain;
        box-shadow: var(--mobile-sheet-card-shadow);
        animation: none;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        will-change: transform;
    }

    #feedback-modal .feedback-card.is-dismissing,
    #payment-modal .payment-card.is-dismissing {
        transition: transform 0.2s ease;
    }

    #points-redeem-modal .points-redeem-card {
        position: fixed;
        top: var(--mobile-sheet-panel-top) !important;
        right: 0;
        left: 0;
        bottom: 0 !important;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: var(--mobile-sheet-panel-h);
        margin: 0;
        padding: 24px 20px max(16px, calc(16px + var(--safe-bottom)));
        transform: none;
        border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0;
        overflow: hidden;
        overscroll-behavior: contain;
        box-shadow: var(--mobile-sheet-card-shadow);
        animation: none;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        will-change: transform;
    }

    #points-redeem-modal .points-redeem-card.is-dismissing {
        transition: transform 0.2s ease;
    }

    #login-modal .auth-card {
        position: fixed;
        top: calc(100dvh - 596px) !important;
        right: 0;
        left: 0;
        bottom: 0 !important;
        width: 100%;
        max-width: none;
        height: 596px;
        margin: 0;
        padding: 24px 20px max(16px, calc(16px + var(--safe-bottom)));
        transform: none;
        border: none;
        border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0;
        overflow: hidden;
        overscroll-behavior: contain;
        box-shadow: var(--mobile-sheet-card-shadow);
        animation: none;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        will-change: transform;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #login-modal .auth-card.is-dismissing {
        transition: transform 0.2s ease;
    }

    #login-modal .auth-tabs {
        flex-shrink: 0;
    }

    #login-modal .auth-panel {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #login-modal .login-input {
        font-size: var(--mobile-search-input-font-size, 16px);
    }

    /* 协议 / 政策弹层：手机端同样走底部卡片，正文区独立滚动 */
    #legal-terms-modal.modal.show,
    #legal-privacy-modal.modal.show {
        align-items: flex-end;
        justify-content: stretch;
    }

    #legal-terms-modal .legal-card,
    #legal-privacy-modal .legal-card,
    #legal-terms-modal .legal-card.is-maximized,
    #legal-privacy-modal .legal-card.is-maximized {
        position: fixed;
        top: var(--mobile-sheet-panel-top) !important;
        right: 0;
        left: 0;
        bottom: 0 !important;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: var(--mobile-sheet-panel-h);
        margin: 0;
        padding: 20px 20px max(16px, calc(16px + var(--safe-bottom)));
        border: none;
        border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0;
        background: var(--mobile-sheet-surface-bg, var(--panel-surface-bg, var(--modal-card-bg)));
        box-shadow: var(--mobile-sheet-card-shadow);
        overflow: hidden;
        overscroll-behavior: contain;
        animation: none;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    #legal-terms-modal .legal-card .legal-body,
    #legal-privacy-modal .legal-card .legal-body {
        padding-right: 4px;
    }

    #quick-prompt-modal.modal.show {
        align-items: flex-end;
        justify-content: stretch;
    }

    #quick-prompt-modal .modal-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--mobile-sheet-scrim-bg, rgba(0, 0, 0, 0.42));
    }

    #quick-prompt-modal .modal-card-form {
        position: fixed;
        top: var(--mobile-sheet-panel-top) !important;
        right: 0;
        left: 0;
        bottom: 0 !important;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: var(--mobile-sheet-panel-h);
        margin: 0;
        padding: 20px 20px max(16px, calc(16px + var(--safe-bottom)));
        border: none;
        border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0;
        background: var(--mobile-sheet-surface-bg, var(--panel-surface-bg, var(--modal-card-bg)));
        box-shadow: var(--mobile-sheet-card-shadow);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        animation: asset-library-mobile-sheet-in 0.34s cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform;
    }

    #quick-prompt-modal .modal-card-form.is-dismissing {
        transition: transform 0.22s ease;
    }

    #quick-prompt-modal .modal-card-form:has(.chip-dropdown.is-open),
    #quick-prompt-modal .quick-prompt-modal-settings:has(.chip-dropdown.is-open),
    #quick-prompt-modal:has(.chip-dropdown.is-open) .quick-prompt-modal-composer-stack,
    #quick-prompt-modal:has(.chip-dropdown.is-open) .quick-prompt-modal-composer-params {
        overflow: visible;
    }

    #quick-prompt-modal .quick-prompt-add-text,
    #quick-prompt-modal #quick-prompt-modal-text {
        flex: 1 1 auto;
        min-height: 120px;
    }

    /* 手机端 sheet 卡片：顶部拖拽关闭区 */
    .mobile-sheet-close {
        position: absolute;
        top: 8px;
        right: 10px;
        z-index: 40;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--bg-elev-2, #ebebef);
        color: var(--text-secondary);
        cursor: pointer;
        flex-shrink: 0;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: background 0.15s ease, color 0.15s ease;
    }

    /* 素材库那张卡片的关闭键再往左 8px（需求：「@button 左移 8px」）。
       只改这一张 —— 上面那条是各个手机端 sheet 共用的，
       AI 工具 / 通知 / 反馈 / 支付那几张的关闭键位置不变。 */
    #asset-library-modal .asset-library-modal-card > .mobile-sheet-close {
        right: 18px;
    }

    .mobile-sheet-close:hover,
    .mobile-sheet-close:focus-visible {
        background: var(--bg-elev-3, #e2e2e6);
        color: var(--text-primary);
        outline: none;
    }

    [data-theme="dark"] .mobile-sheet-close {
        background: var(--bg-elev-2, #2c2c2e);
        color: var(--text-secondary);
    }

    [data-theme="dark"] .mobile-sheet-close:hover,
    [data-theme="dark"] .mobile-sheet-close:focus-visible {
        background: var(--bg-elev-3, #3a3a3c);
        color: var(--text-primary);
    }

    @media (prefers-color-scheme: dark) {
        [data-theme="system"] .mobile-sheet-close {
            background: var(--bg-elev-2, #2c2c2e);
            color: var(--text-secondary);
        }

        [data-theme="system"] .mobile-sheet-close:hover,
        [data-theme="system"] .mobile-sheet-close:focus-visible {
            background: var(--bg-elev-3, #3a3a3c);
            color: var(--text-primary);
        }
    }

    .mobile-sheet-close svg {
        width: 12px;
        height: 12px;
        display: block;
        pointer-events: none;
    }

    .mobile-sheet-title-row {
        position: absolute;
        top: 8px;
        left: 14px;
        right: 96px;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
        height: 32px;
        pointer-events: none;
    }

    .mobile-sheet-title-row[hidden] {
        display: none !important;
    }

    .mobile-sheet-title {
        display: block;
        min-width: 0;
        font-size: 16px;
        font-weight: 600;
        line-height: 32px;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }

    .mobile-sheet-back {
        display: none;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-primary);
        cursor: pointer;
        flex-shrink: 0;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .mobile-sheet-title-row.has-back .mobile-sheet-back:not([hidden]) {
        display: none !important;
    }

    .mobile-sheet-back svg {
        width: 18px;
        height: 18px;
        pointer-events: none;
    }

    #user-menu > .user-menu-settings-restore-all {
        position: absolute;
        top: 8px;
        right: 42px;
        z-index: 41;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin: 0;
        width: auto;
        height: 32px;
        min-width: 0;
        min-height: 32px;
        padding: 0 8px;
        box-sizing: border-box;
        border-radius: 8px;
        background: transparent;
        color: var(--text-secondary);
        transform: none;
    }

    #user-menu > .user-menu-settings-restore-all:hover,
    #user-menu > .user-menu-settings-restore-all:focus-visible {
        background: var(--bg-elev-2, #ebebef);
        color: var(--text-primary);
        transform: none;
        outline: none;
    }

    #user-menu > .user-menu-settings-restore-all svg {
        width: 14px;
        height: 14px;
    }

    #user-menu > .user-menu-settings-restore-all .user-menu-settings-restore-all-label {
        display: inline;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }

    html.is-user-menu-sheet-open #user-menu .user-menu-sheet-head {
        display: none !important;
    }

    .notify-dropdown.is-open #notify-popover.is-mobile-sheet .notify-popover-head-leading,
    #notify-popover.is-mobile-sheet .notify-popover-title,
    #feedback-modal .points-redeem-head,
    #points-redeem-modal .points-redeem-head,
    #payment-modal .points-redeem-head,
    #quick-prompt-modal .modal-card-form > h3 {
        display: none !important;
    }

    .notify-dropdown.is-open #notify-popover.is-mobile-sheet .notify-popover-header {
        padding: 0;
        min-height: 0;
        border: none;
        background: transparent;
    }

    .notify-dropdown.is-open #notify-popover.is-mobile-sheet .notify-popover-head-actions {
        position: absolute;
        top: 8px;
        right: 50px;
        z-index: 41;
        height: 32px;
        align-items: center;
    }

    .notify-dropdown.is-open #notify-popover.is-mobile-sheet .notify-mark-all-read {
        height: 32px;
        padding: 0 8px;
        box-sizing: border-box;
    }

    .notify-dropdown.is-open #notify-popover.is-mobile-sheet .notify-mark-all-read-icon,
    .user-menu-notify-head .notify-mark-all-read-icon {
        display: block;
    }

    #login-modal .auth-tabs,
    #quick-prompt-modal .modal-card-form > h3 {
        padding-right: 40px;
    }

    .mobile-sheet-dismiss-zone {
        display: flex;
        position: relative;
        z-index: 30;
        flex-shrink: 0;
        width: 100%;
        min-height: var(--mobile-sheet-dismiss-zone-h, 56px);
        align-items: center;
        justify-content: center;
        align-self: stretch;
        box-sizing: border-box;
        touch-action: none;
        cursor: grab;
        -webkit-user-select: none;
        user-select: none;
    }

    .mobile-sheet-dismiss-zone.is-dragging {
        cursor: grabbing;
    }

    .mobile-prompt-sheet-card.is-dragging,
    #user-menu.is-dragging,
    html[data-mobile-home-chat-shell] #panel-home .hero.is-dragging,
    #points-redeem-modal .points-redeem-card.is-dragging,
    #login-modal .auth-card.is-dragging,
    #quick-prompt-modal .modal-card-form.is-dragging,
    #asset-library-modal .asset-library-modal-card.is-dragging,
    #ai-tool-modal .ai-tool-modal-card.is-dragging,
    #notify-popover.is-mobile-sheet.is-dragging,
    #feedback-modal .feedback-card.is-dragging,
    #payment-modal .payment-card.is-dragging {
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        pointer-events: auto;
    }

    /*
     * 弹层卡片默认不把触摸交给浏览器去滚页面。
     * 真正需要竖滑的区域（列表 / 对话 / 表单）各自声明 pan-y。
     * 这样点在按钮上再下滑，手势会留给 JS 拖动弹层，而不是带动后面的网页。
     */
    .mobile-prompt-sheet-card,
    #user-menu,
    #points-redeem-modal .points-redeem-card,
    #login-modal .auth-card,
    #quick-prompt-modal .modal-card-form,
    #asset-library-modal .asset-library-modal-card,
    #ai-tool-modal .ai-tool-modal-card,
    #notify-popover.is-mobile-sheet,
    #feedback-modal .feedback-card,
    #payment-modal .payment-card {
        touch-action: none;
    }

    /*
     * 手机端弹层都是满宽贴底的抽屉，四周那圈 1px 描边只会在屏幕左右边缘各留一条
     * 竖线、顶部压在圆角上，看着像一圈没对齐的框。去掉描边，靠圆角和上投影分层。
     *
     * 各弹层卡片本身不再写 border，这里兜的是基样式里的声明：
     *   .modal-card                     → 18-modals.css（几乎所有弹层卡片都带这个 class）
     *   #asset-library-modal …          → 24-asset-library.css，底部抽屉式弹层
     *   #character-library-modal …      → 38-character-library.css，同上
     *   .pricing-sheet-card.pricing-page→ 23-pricing.css，套餐弹层不带 .modal-card
     *   .notify-sheet-card              → 05-notifications.css，平台通知弹层同理
     * 素材库和角色库那两条来源规则是 #id + class，所以要带 #id 才压得住；
     * 其余几条和来源同级，靠本文件在 styles.css / styles-pages.css 之后加载取胜。
     */
    .modal-card,
    #asset-library-modal .asset-library-modal-card,
    #character-library-modal .character-library-modal-card,
    .pricing-sheet-card,
    .pricing-sheet-card.pricing-page,
    .notify-sheet-card {
        border: none;
    }

    /*
     * 41-perf.css 给所有 button 写了 touch-action: manipulation（允许平移），
     * 会盖掉上面从卡片继承来的 none。这里再压回去：点按钮再下滑仍由弹层接手。
     * 输入框保持 pan-y，长文案还能自己滚。
     */
    .mobile-prompt-sheet-card :is(button, a, [role="button"], summary, label),
    #user-menu :is(button, a, [role="button"], summary, label),
    #points-redeem-modal .points-redeem-card :is(button, a, [role="button"], summary, label),
    #login-modal .auth-card :is(button, a, [role="button"], summary, label),
    #quick-prompt-modal .modal-card-form :is(button, a, [role="button"], summary, label),
    #asset-library-modal .asset-library-modal-card :is(button, a, [role="button"], summary, label),
    #ai-tool-modal .ai-tool-modal-card :is(button, a, [role="button"], summary, label),
    #notify-popover.is-mobile-sheet :is(button, a, [role="button"], summary, label),
    #feedback-modal .feedback-card :is(button, a, [role="button"], summary, label),
    #payment-modal .payment-card :is(button, a, [role="button"], summary, label),
    html[data-mobile-home-chat-shell] #panel-home .hero > .prompt-box :is(button, a, [role="button"], summary, label),
    html[data-mobile-home-chat-shell] #panel-home .hero > .home-create-goals :is(button, a, [role="button"], summary, label) {
        touch-action: none;
    }

    .mobile-prompt-sheet-card :is(textarea, input, [contenteditable="true"]),
    #user-menu :is(textarea, input, [contenteditable="true"]),
    #points-redeem-modal .points-redeem-card :is(textarea, input, [contenteditable="true"]),
    #login-modal .auth-card :is(textarea, input, [contenteditable="true"]),
    #quick-prompt-modal .modal-card-form :is(textarea, input, [contenteditable="true"]) {
        touch-action: pan-y;
    }

    /*
     * 创作弹层内容区几乎全是 button（目标卡、模型行、设置选项）。
     * 父级 card 若是 none，子级即使写 pan-y 也会被交集成 none，点在按钮上就滚不动列表。
     * 卡片和内容改为 pan-y：列表可以竖滑；页面仍被 html[data-mobile-prompt-sheet-open]
     * .app-layout { touch-action:none } 锁住。拉到顶再下滑关闭仍由 JS 接手。
     */
    .mobile-prompt-sheet-card,
    .mobile-prompt-sheet-card .mobile-prompt-sheet-body,
    .mobile-prompt-sheet-card .mobile-prompt-sheet-body :is(button, a, [role="button"], summary, label) {
        touch-action: pan-y;
    }

    .mobile-prompt-sheet-card .ai-create-goal-tabs,
    .mobile-prompt-sheet-card .ai-create-goal-tabs :is(button, a, [role="button"]) {
        touch-action: pan-x pan-y;
    }

    .mobile-prompt-sheet-card > .mobile-sheet-dismiss-zone,
    .mobile-prompt-sheet-card > .mobile-prompt-sheet-head,
    .mobile-prompt-sheet-card > .mobile-prompt-sheet-head :is(button, a, [role="button"]) {
        touch-action: none;
    }

    html.is-mobile-sheet-dragging,
    html.is-mobile-sheet-dragging body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    html.is-mobile-sheet-dragging .app-layout,
    html.is-mobile-sheet-dragging .app-main-shell,
    html.is-mobile-sheet-dragging .main,
    html[data-mobile-prompt-sheet-open] .app-layout,
    html[data-mobile-prompt-sheet-open] .app-main-shell,
    html[data-mobile-prompt-sheet-open] .main {
        overscroll-behavior: none;
        touch-action: none;
    }

    /*
     * —— 弹层露在卡片外面的那圈背景，不许把后面的页面带着滚 ——
     *
     * 抽屉卡片自己写了 touch-action: none，卡片里面滑动没问题；但卡片上方露出来的
     * 背景是 .modal-overlay，它按默认的 auto 处理手势：手指在那里上下滑，浏览器就去找
     * 「谁来实现这个手势」—— 弹层是 body 的直系子节点（position: fixed，包含块是视口），
     * 中间没有滚动容器，于是落到视口上，把弹层后面的页面滚走了。
     * 输入区越短、卡片越矮，露出越大（闲置态的 AI 工具弹层就是这种），越容易踩到。
     *
     * .modal-overlay 在 18-modals.css 里只有 position / inset / background 三条，
     * 从来不是滚动容器，取消它的平移能力不影响任何布局；点它关闭弹层也照旧 ——
     * touch-action 只管手势，不管 click。
     */
    .modal-overlay {
        touch-action: none;
    }

    /* 再加一道闸：AI 工具弹层开着的时候，页面本身也别想滚。
       手势万一落在别处（卡片自己的留白、公共的抓手区），也没东西可滚。
       关掉弹层会摘掉 data-ai-tool-open，两条锁一起松开。 */
    html[data-ai-tool-open],
    html[data-ai-tool-open] body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    .mobile-sheet-handle {
        display: none !important;
    }

    /* 各弹层顶部横杆统一距顶边 4px（仅可见时生效） */
    .mobile-sheet-dismiss-zone .mobile-sheet-handle {
        align-self: flex-start;
        margin: 4px auto 0;
    }

    /* 移动端全部弹层卡片：顶部横杆统一可见（与创作弹层 .mobile-prompt-sheet-card 一致） */
    .mobile-sheet-dismiss-zone .mobile-sheet-handle {
        display: block !important;
        flex: 0 0 auto;
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.16);
    }

    /* JS 包装前：横条作为卡片首子元素时也居中 */
    #user-menu > .mobile-sheet-handle,
    .modal-card > .mobile-sheet-handle,
    .points-redeem-card > .mobile-sheet-handle,
    .feedback-card > .mobile-sheet-handle,
    #login-modal .auth-card > .mobile-sheet-handle,
    .payment-card > .mobile-sheet-handle,
    .asset-library-modal-card > .mobile-sheet-handle,
    #notify-popover > .mobile-sheet-handle,
    .mobile-prompt-sheet-card > .mobile-sheet-handle {
        align-self: center;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
    }

    /* 未接入拖拽区的底部卡片（角色库 / 套餐页 / AI 工具弹层）：卡片首子元素横杆同样显示 */
    .character-library-modal-card > .mobile-sheet-handle,
    .pricing-sheet-card > .mobile-sheet-handle,
    .ai-tool-modal-card > .mobile-sheet-handle {
        display: block !important;
        flex: 0 0 auto;
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.16);
        margin: 8px auto 0;
    }

    /* 首页 hero 非弹层卡片：顶部不显示横杆 */
    #panel-home .hero > .mobile-sheet-dismiss-zone .mobile-sheet-handle {
        display: none !important;
    }

    [data-theme="dark"] .mobile-sheet-handle {
        background: rgba(255, 255, 255, 0.22);
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"] .mobile-sheet-handle {
            background: rgba(255, 255, 255, 0.22);
        }
    }

    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu:not([hidden]),
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu:not([hidden]),
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu:not([hidden]),
    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu.is-settings-view:not([hidden]),
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu.is-settings-view:not([hidden]),
    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu.is-settings-view:not([hidden]) {
        padding-top: 0 !important;
        will-change: transform;
    }

    html.is-user-menu-sheet-open #user-menu > .mobile-sheet-dismiss-zone,
    html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap .user-menu:not([hidden]) > .mobile-sheet-dismiss-zone,
    html[data-mobile-topbar-user-dock] .user-menu-wrap.is-mobile-topbar-docked .user-menu:not([hidden]) > .mobile-sheet-dismiss-zone {
        position: relative;
        top: 0;
        margin: 0 -12px;
        width: auto;
        align-self: stretch;
        box-sizing: border-box;
    }

    #user-menu > .mobile-sheet-title-row.has-back .mobile-sheet-back:not([hidden]) {
        display: flex !important;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero {
        padding-top: 0 !important;
        will-change: transform;
    }

    #asset-library-modal .asset-library-modal-card,
    #asset-library-modal .asset-library-modal-card.is-maximized,
    #feedback-modal .feedback-card,
    #login-modal .auth-card,
    #payment-modal .payment-card,
    .mobile-prompt-sheet-card {
        will-change: transform;
    }

    #user-menu.is-dismissing,
    html[data-mobile-home-chat-shell] #panel-home .hero.is-dismissing,
    #asset-library-modal .asset-library-modal-card.is-dismissing,
    #ai-tool-modal .ai-tool-modal-card.is-dismissing,
    #feedback-modal .feedback-card.is-dismissing,
    #login-modal .auth-card.is-dismissing,
    #payment-modal .payment-card.is-dismissing,
    #quick-prompt-modal .modal-card-form.is-dismissing,
    #points-redeem-modal .points-redeem-card.is-dismissing,
    .mobile-prompt-sheet-card.is-dismissing {
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    }

    #asset-library-modal .asset-library-modal-card,
    #asset-library-modal .asset-library-modal-card.is-maximized,
    #ai-tool-modal .ai-tool-modal-card,
    #points-redeem-modal .points-redeem-card,
    #feedback-modal .feedback-card,
    #login-modal .auth-card,
    #payment-modal .payment-card,
    .mobile-prompt-sheet-card {
        padding-top: 1px;
    }

    #points-redeem-modal .points-redeem-head {
        touch-action: none;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
    }

    #points-redeem-modal .points-redeem-head,
    #points-redeem-modal .points-redeem-balance,
    #points-redeem-modal .login-form {
        flex-shrink: 0;
    }

    /* 第 839 轮（需求）：「文字颜色改成黑色」—— 桌面那条改了，手机这条也要跟着 */
    #points-redeem-modal .points-redeem-balance-value {
        color: #000;
        -webkit-text-fill-color: #000;
    }

    #points-redeem-modal .login-input {
        font-size: var(--mobile-search-input-font-size, 16px);
        background: #ffffff;
        color: #1a1523;
        border-color: rgba(0, 0, 0, 0.1);
    }

    #points-redeem-modal .login-input::placeholder {
        color: rgba(26, 21, 35, 0.4);
    }

    #points-redeem-modal .login-input:focus,
    #points-redeem-modal .login-input:focus-visible {
        border-color: rgba(0, 0, 0, 0.18);
    }

    #points-redeem-modal .points-redeem-code-field {
        position: relative;
        z-index: 1;
        overflow: visible;
    }

    #points-redeem-modal .points-redeem-code-clear {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: rgba(0, 0, 0, 0.08);
        color: rgba(26, 21, 35, 0.62);
        z-index: 3;
    }

    #points-redeem-modal .points-redeem-code-clear[hidden] {
        display: none !important;
    }

    #points-redeem-modal .points-redeem-code-clear:not([hidden]) {
        display: inline-flex !important;
    }

    #points-redeem-modal .points-redeem-code-clear:hover,
    #points-redeem-modal .points-redeem-code-clear:focus-visible {
        background: rgba(0, 0, 0, 0.12);
        color: #1a1523;
    }

    #points-redeem-modal .points-redeem-history {
        flex: 1 1 auto;
        min-height: 0;
        margin-top: 16px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        touch-action: none;
    }

    #points-redeem-modal .points-redeem-history-title {
        flex-shrink: 0;
    }

    #points-redeem-modal .points-redeem-history-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-gen-settings > .chip-dropdown-menu,
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-model > .chip-dropdown-menu,
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-mode > .chip-dropdown-menu,
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .chip-dropdown-menu.is-mobile-toolbar-docked {
        max-width: none !important;
    }

    /* 工作流画布：铺满视口，去除侧边栏遮罩与内容区灰底遮挡 */
    html[data-workflow-active] .app-layout {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }

    html[data-workflow-active] .app-main-shell,
    html[data-workflow-active] .main,
    html[data-workflow-active] .content {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        background: var(--wf-page-bg);
    }

    html[data-workflow-active] .app-main-shell::before {
        display: none !important;
        content: none !important;
        pointer-events: none !important;
    }

    html[data-app-sidebar-drawer-open][data-workflow-active] .app-main-shell::before {
        content: "" !important;
        display: block !important;
        position: absolute;
        inset: 0;
        z-index: 400;
        background: rgba(0, 0, 0, 0.42);
        pointer-events: auto !important;
        border-radius: inherit;
    }

    html[data-workflow-active] #panel-workflow.workflow-page,
    html[data-workflow-active] .wf-app {
        height: 100%;
        min-height: 0;
        max-height: 100%;
    }

    html[data-workflow-active] .topbar-right .user-menu-wrap .user-menu:not([hidden]) {
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: var(--mobile-sheet-panel-top) !important;
        width: 100% !important;
        min-width: 0;
        max-width: none !important;
        max-height: var(--mobile-sheet-panel-h);
        height: auto;
        margin: 0;
        padding-bottom: max(12px, var(--safe-bottom));
        z-index: var(--wf-overlay-z, 10100);
        box-sizing: border-box;
        border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0;
        border-bottom: none;
        box-shadow: var(--mobile-sheet-card-shadow);
        animation: asset-library-mobile-sheet-in 0.34s cubic-bezier(0.32, 0.72, 0, 1);
    }

    html[data-workflow-active].is-user-menu-sheet-open .user-menu-wrap.is-menu-open {
        z-index: calc(var(--wf-overlay-z, 10100) + 1);
    }

    /* 工作流手机端：顶栏随 Logo + 竖向导航增高，避免展开后 Logo 被裁切 */
    html[data-workflow-active] .topbar {
        align-items: flex-start;
        height: auto;
        min-height: calc(var(--topbar-chrome-h) + max(10px, var(--safe-top)));
        padding: max(10px, var(--safe-top)) 15px 8px;
        box-sizing: border-box;
        overflow: visible;
    }

    html[data-workflow-active] .topbar-left {
        align-items: flex-start;
        margin-left: 0;
    }

    html[data-workflow-active] .topbar-right {
        display: flex;
        align-items: center;
        gap: 8px;
        align-self: flex-start;
        padding-top: 0;
        margin-right: -20px;
    }

    html[data-workflow-active]:not([data-wf-compact]) .topbar-primary-nav-host:not(:empty) {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        align-self: flex-start;
    }

    html[data-workflow-active] .topbar-primary-nav-host .app-sidebar-logo {
        position: static;
        inset: auto;
        width: auto;
        height: auto;
        margin: 0;
        opacity: 1;
        flex-shrink: 0;
        display: flex;
        visibility: visible;
        pointer-events: auto;
    }

    /* 画布顶栏网站 logo 左移 20px，贴近视口左边缘（transform 不影响标题等后续元素的布局） */
    html[data-workflow-active] .topbar-primary-nav-host .app-sidebar-logo {
        transform: translateX(-20px);
    }

    html[data-workflow-active] .topbar-primary-nav-host .logo,
    html[data-workflow-active] .topbar-primary-nav-host .logo-icon,
    html[data-workflow-active] .topbar-primary-nav-host .logo-icon-img,
    html[data-workflow-active] .topbar-primary-nav-host .app-sidebar-logo-flip {
        display: flex;
        flex-shrink: 0;
        opacity: 1;
        visibility: visible;
    }

    html[data-workflow-active] .topbar-primary-nav-host .logo-icon-img {
        display: block;
    }

    html[data-workflow-active] .topbar-primary-nav-host .logo-icon {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    html[data-workflow-active]:not([data-wf-compact]) .topbar .main-nav {
        flex-direction: column;
        height: auto;
        width: max-content;
        min-height: 0;
        padding: 4px;
        gap: 2px;
    }

    html[data-workflow-active]:not([data-wf-compact]) .topbar .main-nav .nav-item {
        width: 100%;
        justify-content: center;
    }

    html[data-workflow-active] .topbar-right {
        display: flex;
        align-items: center;
        gap: 8px;
        align-self: flex-start;
        padding-top: 0;
        margin-right: -20px;
    }

    html[data-workflow-active] #topbar-user-tabs-host:not([hidden]) {
        order: 0;
        flex: 0 0 auto;
    }

    html[data-workflow-active] .topbar-right .user-slot {
        order: 1;
        flex: 0 0 auto;
    }

    /* 工作流紧凑态：画布占满，顶栏透明悬浮不挡交互 */
    html[data-workflow-active][data-wf-compact] #panel-workflow.workflow-page {
        padding-bottom: 0;
    }

    html[data-workflow-active][data-wf-compact] .wf-canvas-wrap {
        min-height: 100%;
    }

    html[data-workflow-active][data-wf-compact] .topbar-actions {
        flex-wrap: nowrap;
        min-width: 0;
    }

    html[data-workflow-active][data-wf-compact] .topbar-workflow-meta-host:not([hidden]),
    html[data-workflow-active][data-wf-compact] .topbar-workflow-meta-slot:not([hidden]) {
        max-width: none;
        overflow: hidden;
    }

    /* 工作流紧凑态：左右顶栏胶囊同高（与桌面 .topbar-left/right 40px 一致） */
    html[data-workflow-active][data-wf-compact] .topbar-left {
        flex: 1 1 auto;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        gap: 6px 8px;
        min-width: 0;
        max-width: none;
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        box-sizing: border-box;
        overflow: visible;
    }

    html[data-workflow-active][data-wf-compact] .topbar-left::after {
        content: none;
        display: none;
    }

    html[data-workflow-active][data-wf-compact] .topbar-right {
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        box-sizing: border-box;
        align-items: center;
    }

    html[data-workflow-active][data-wf-compact] .topbar-primary-nav-host:not(:empty) {
        display: flex;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        order: -1;
        gap: 0;
    }

    html[data-workflow-active][data-wf-compact] .topbar-primary-nav-host .app-sidebar-logo,
    html[data-workflow-active][data-wf-compact] .topbar-primary-nav-host .logo,
    html[data-workflow-active][data-wf-compact] .topbar-primary-nav-host .logo-icon,
    html[data-workflow-active][data-wf-compact] .topbar-primary-nav-host .logo-icon-img,
    html[data-workflow-active][data-wf-compact] .topbar-primary-nav-host .app-sidebar-logo-flip {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0;
    }

    html[data-workflow-active][data-wf-compact] .topbar-primary-nav-host .logo-icon-img {
        display: block !important;
    }

    html[data-workflow-active][data-wf-compact] #topbar-workflow-dock-host:not([hidden]) {
        display: none !important;
    }

    html[data-workflow-active][data-wf-compact] #topbar-workflow-meta-host:not([hidden]) {
        order: 2;
        flex: 0 0 auto;
        display: flex !important;
        width: auto;
        max-width: min(200px, 42vw);
        min-width: 0;
    }

    html[data-workflow-active][data-wf-compact] .topbar .main-nav {
        order: 5;
        flex: 0 0 auto;
        flex-direction: row;
        width: auto;
        max-width: 100%;
        height: auto;
        min-height: 0;
        min-width: 0;
        padding: 2px 4px;
        gap: 2px;
        justify-content: flex-start;
        margin-left: 0;
        align-self: flex-start;
    }

    html[data-workflow-active][data-wf-compact] .topbar-left > #main-nav[data-wf-compact-topbar-docked="1"] {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
        align-self: flex-start;
    }

    html[data-workflow-active][data-wf-compact] .topbar .main-nav .nav-item {
        width: auto;
        flex: 0 0 auto;
        justify-content: center;
    }

    /* 工作流紧凑态：顶栏仅保留头像按钮，去掉 user-slot / 积分胶囊外框 */
    html[data-workflow-active][data-wf-compact] .topbar-right .user-slot {
        display: contents;
    }

    html[data-workflow-active][data-wf-compact] .topbar-right .user-menu-wrap {
        display: contents;
        background: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html[data-workflow-active][data-wf-compact] .topbar-right .user-slot #login-btn,
    html[data-workflow-active][data-wf-compact] .topbar-right .user-slot #guest-settings-btn,
    html[data-workflow-active][data-wf-compact] .topbar-right #topbar-points-pill {
        display: none !important;
    }

    html[data-workflow-active][data-wf-compact] .topbar-right #user-avatar-btn {
        flex: 0 0 auto;
    }

    /* 移动端首页输入框 / 图片栈 / dock 布局（统一 ≤900px，不再单独分 480px） */
    :root {
        --topbar-h: 56px;
    }

    .content {
        padding-left: max(12px, var(--safe-left));
        padding-right: max(12px, var(--safe-right));
    }

    #panel-home .hero:not(:has(.hero-results:not([hidden]))) {
        padding-top: max(8px, var(--safe-top));
        padding-bottom: max(10px, calc(10px + var(--safe-bottom)));
        padding-inline: max(12px, calc(12px + var(--safe-left)));
    }

    .hero:has(> .hero-results:not([hidden])) {
        border-radius: var(--radius-md);
    }

    html[data-mobile-home-chat-shell] #panel-home .hero:not(:has(.hero-results:not([hidden]))):not(.is-prompt-composer-maximized) > .mobile-sheet-dismiss-zone {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        /* 与顶栏一致的半透明磨砂：hero 内容从横杆区域滚过时透出并模糊 */
        background: color-mix(in srgb, var(--bg-base) 60%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    html[data-mobile-home-chat-shell] #panel-home .hero:not(:has(.hero-results:not([hidden]))) {
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: max(12px, calc(12px + var(--safe-bottom)));
        justify-content: flex-start;
        align-items: stretch;
        padding-left: max(6px, var(--safe-left));
        padding-right: max(6px, var(--safe-right));
    }

    html[data-mobile-home-chat-shell] #panel-home:has(.hero-results:not([hidden])) .hero {
        padding-left: 0;
        padding-right: 0;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded {
        flex: 0 0 auto;
        width: calc(100% - (var(--mobile-home-prompt-box-inset, 10px) * 2)) !important;
        max-width: calc(100% - (var(--mobile-home-prompt-box-inset, 10px) * 2)) !important;
        min-width: 0 !important;
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded:has(.image-stack.has-images.is-expanded) .prompt-input-wrap,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded:has(.image-stack.has-images.is-expanded) > .prompt-input-editor {
        overflow: visible;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded {
        border-radius: var(--wf-composer-radius, 40px) !important;
        overflow: hidden;
        /* 无对话态与对话态用同一套磨砂参数（--mobile-chat-glass-*，见 1974 行）。
           原来这里只写 --hero-chat-surface-bg：颜色接近，但更透一点、而且没有
           backdrop-filter。创作栏是贴底悬浮的，内容（创作目标卡片、对话记录）会从
           它后面滚过去 —— 没有模糊就是「清晰地透出来」，看着像没盖住；
           补上模糊才是与对话态一致的「一块玻璃」。两处必须同时对齐底色与滤镜，
           只改其中一个，观感又会分家。 */
        background: var(--mobile-chat-glass-bg) !important;
        backdrop-filter: var(--mobile-chat-glass-filter);
        -webkit-backdrop-filter: var(--mobile-chat-glass-filter);
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded:has(.image-stack.has-images) > .prompt-input-wrap,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded:has(.image-stack.has-images) > .prompt-input-editor {
        background: transparent;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded:has(.image-stack.has-images),
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded:has(.image-stack.has-images.is-expanded) {
        overflow: hidden !important;
        border-radius: var(--wf-composer-radius, 40px) !important;
    }

    /* 第 1503 轮（需求）：「@div（.prompt-box.is-prompt-expanded 创作栏）不显示阴影」——
       深色主题下这条原来给放大档 0 8px 24px 的投影，现在一并撤掉。 */
    html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded {
        box-shadow: none !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: calc(100% - (var(--mobile-home-prompt-box-inset, 10px) * 2)) !important;
        max-width: calc(100% - (var(--mobile-home-prompt-box-inset, 10px) * 2)) !important;
        align-self: center !important;
        margin-inline: auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 4px;
        gap: 0;
        --mobile-home-prompt-toolbar-pad-x: 8px;
        --mobile-home-prompt-toolbar-options-pull-x: 5px;
        --mobile-home-prompt-chip-trigger-pad-x: 10px;
        --mobile-home-prompt-chip-label-inset: calc(
            var(--mobile-home-prompt-toolbar-pad-x) -
            var(--mobile-home-prompt-toolbar-options-pull-x) +
            var(--mobile-home-prompt-chip-trigger-pad-x)
        );
    }

    html[data-mobile-home-chat-shell]:not([data-mobile-prompt-editor-docked]) :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-input-wrap {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-self: stretch;
        min-height: 0;
        height: auto;
        padding: 12px 14px 10px;
        gap: 8px;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-field {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded .image-stack {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        flex-shrink: 0;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded .image-stack:not(.has-images) {
        width: var(--prompt-empty-action-size, 22px);
        height: var(--prompt-empty-action-size, 22px);
        min-height: 0;
        align-self: center;
        flex-shrink: 0;
        overflow: visible;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded .image-stack-upload-label {
        border-radius: 8px;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded .image-stack.has-images:not(.is-expanded) {
        width: var(--stack-card-w);
        height: var(--stack-card-h);
        min-height: 0;
        align-self: flex-start;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded .prompt-input-wrap:has(.image-stack.has-images.is-expanded) {
        flex-direction: row;
        align-items: center;
        overflow: visible;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded .prompt-input-wrap:has(.image-stack.has-images.is-expanded) > #image-stack {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: none;
        align-self: center;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded .prompt-input-wrap:has(.image-stack.has-images.is-expanded) .prompt-field,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded .prompt-input-wrap:has(.image-stack.has-images.is-expanded) .prompt-textarea-wrap {
        width: 100%;
        min-width: 0;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded .image-stack.has-images.is-expanded:not(.is-collapsing) {
        width: auto;
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
        height: auto;
        min-height: 0;
        overflow: visible;
        align-self: center;
        padding-top: 0;
        box-sizing: border-box;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images:not(.is-collapsing) .image-stack-cards {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: var(--stack-reference-row-gap, 8px);
        width: max-content !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        min-width: 0;
        height: auto !important;
        min-height: var(--stack-card-h);
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* 第 653 轮（需求，移动端）：「@div#image-stack-cards / #image-stack 的左边要对齐
           @div.prompt-input-wrap 的左边」—— 行左内衬 11px 去掉，第一张卡片贴着容器左缘
           （容器自身已经在 `.prompt-input-wrap` 的内容左缘 28px 上，和输入框文字左缘 26px 齐平）。
           右内衬保留：滚动到末尾时最后一张仍与右缘有缝。 */
        padding: 11px 4px 11px 0;
        box-sizing: border-box;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images:not(.is-collapsing) .image-stack-cards::-webkit-scrollbar {
        display: none;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images:not(.is-collapsing) .image-stack-item,
    html[data-mobile-home-chat-shell] .image-stack.has-images:not(.is-collapsing) .stack-add-card:not(.is-reference-row-inline) {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        margin: 0 !important;
        margin-left: 0 !important;
        transform: none !important;
        flex: 0 0 auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        z-index: 1 !important;
        width: var(--item-w, var(--stack-card-w)) !important;
        height: var(--item-h, var(--stack-card-h)) !important;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images:not(.is-collapsing) .image-stack-item .item-body,
    html[data-mobile-home-chat-shell] .image-stack.has-images:not(.is-collapsing) .image-stack-item .item-inner,
    html[data-mobile-home-chat-shell] .image-stack.has-images:not(.is-collapsing) .image-stack-item .item-inner img,
    html[data-mobile-home-chat-shell] .image-stack.has-images:not(.is-collapsing) .image-stack-item .item-inner video.stack-ref-video {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap:has(#image-stack.has-images) {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        align-self: stretch;
        min-height: 0;
        height: auto;
        overflow: visible;
        gap: 0;
        box-sizing: border-box;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > #image-stack.has-images {
        display: block;
        flex: 0 1 auto;
        min-width: 0;
        width: auto;
        max-width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
        align-self: center;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > #image-stack.has-images:has(> .mention-dropdown.is-reference-row-inline:not([hidden])) {
        display: flex;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > #image-stack.has-images .image-stack-cards {
        flex: 0 1 auto;
        width: max-content;
        min-width: 0;
        max-width: 100%;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded:not(.is-collapsing) .image-stack-cards {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: var(--stack-reference-row-gap, 8px);
        width: max-content;
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: 0;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* 第 653 轮（需求，移动端）：同上面那条 —— 行左内衬归零，第一张卡片贴到
           `.prompt-input-wrap` 的内容左缘（42px → 28px）。
           第 654 轮（需求，移动端）：「@div（.prompt-input-wrap）高度减少 20px」——
           上下内衬 14 → 4（行高 92 → 72），参考行带着卡片一起矮 20px：
           `.prompt-input-wrap` 108 → 88（7 + 2 + 72 + 7）。左右内衬照旧。 */
        padding: 4px 14px 4px 0;
        box-sizing: border-box;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded:not(.is-collapsing) .image-stack-cards::-webkit-scrollbar {
        display: none;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded:not(.is-collapsing) .image-stack-item,
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded:not(.is-collapsing) .stack-add-card:not(.is-reference-row-inline),
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded:not(.is-collapsing) .mobile-docked-stack-add-slot {
        position: relative;
        left: auto;
        bottom: auto;
        top: auto;
        margin-left: 0;
        transform: none !important;
        flex: 0 0 auto;
        overflow: visible;
        z-index: 1;
        width: var(--item-w, var(--stack-card-w));
        height: var(--item-h, var(--stack-card-h));
        opacity: 1 !important;
        visibility: visible !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded:has(.image-stack.has-images) .image-stack-cards {
        display: flex !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box:has(.image-stack.has-images) .image-stack-cards,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box:has(.image-stack.has-images) .image-stack-item,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box:has(.image-stack.has-images) .stack-add-card {
        display: flex !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box:has(.image-stack.has-images) .image-stack {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: auto;
        max-width: 100%;
        height: auto;
        overflow: visible;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded:not(.is-collapsing) .image-stack-item .item-body {
        position: relative;
        transform: none !important;
        transform-origin: center center;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded:not(.is-collapsing) .image-stack-item .item-inner img,
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded:not(.is-collapsing) .image-stack-item .item-inner video.stack-ref-video {
        transform: none;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded:not(.is-collapsing) .image-stack-item .item-body,
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded:not(.is-collapsing) .image-stack-item .item-inner {
        /* 第 164 轮：与桌面端一样改成 hidden —— 替换键现在是「底边贴齐」的，
           不裁的话它那两个下角会探到圆外。 */
        overflow: hidden;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded:not(.is-collapsing) .image-stack-item .item-inner .remove-img,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded:not(.is-collapsing) .image-stack-item .item-inner .remove-img {
        position: absolute;
        /* 第 321 轮：位置与桌面端基础规则一致 —— 左上角 10px；
           第 1502 轮（需求）：「@button（.remove-img 移除文件）和 @button（.replace-img 替换文件）
           互换一下位置」—— 移除键改到右上角，替换键挪到左上角。 */
        top: var(--stack-action-inset, 10px) !important;
        left: auto !important;
        right: var(--stack-action-inset, 10px) !important;
        bottom: auto !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 30;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded:not(.is-collapsing) .image-stack-item .item-inner .replace-img,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded:not(.is-collapsing) .image-stack-item .item-inner .replace-img {
        position: absolute;
        /* 第 321 轮：位置与桌面端基础规则一致 —— 右上角 10px
           （此前是「底部居中」，靠 --stack-action-lift 抬 5px 躲开正圆收窄处）。
           第 1502 轮（需求）：两颗互换位置 —— 替换键改到左上角（和移除键对调）。 */
        top: var(--stack-action-inset, 10px) !important;
        bottom: auto !important;
        left: var(--stack-action-inset, 10px) !important;
        right: auto !important;
        margin-left: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 30;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item:hover,
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item:focus-within {
        z-index: 5;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded:not(.is-collapsing) .stack-add-card:not(.is-reference-row-inline) {
        display: flex !important;
        width: var(--stack-card-w);
        height: var(--stack-card-h);
    }

    html[data-mobile-home-chat-shell] .image-stack.is-collapsing .image-stack-item .remove-img {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item:hover {
        z-index: 5;
        width: var(--item-w, var(--stack-card-w));
        height: var(--item-h, var(--stack-card-h));
        margin-left: 0;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item:hover .item-body {
        transform: none !important;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item .item-inner .remove-img:hover,
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item .item-inner .remove-img:focus-visible,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded .image-stack-item .item-inner .remove-img:hover,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded .image-stack-item .item-inner .remove-img:focus-visible {
        transform: scale(1.1) !important;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item .item-inner .replace-img:hover,
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item .item-inner .replace-img:focus-visible,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded .image-stack-item .item-inner .replace-img:hover,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded .image-stack-item .item-inner .replace-img:focus-visible {
        /* 放大反馈只有 scale（居中靠 margin-left，不经过 transform） */
        transform: scale(1.1) !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-field,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-textarea-wrap {
        align-items: flex-start;
        height: auto;
        min-height: 0;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-input-editor {
        position: relative;
        width: 100%;
        min-width: 0;
        min-height: 0;
        cursor: text;
        -webkit-tap-highlight-color: transparent;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-input-wrap:has(#image-stack:not([hidden]) #image-stack-upload-label:not([hidden])) .prompt-input-editor {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded > .prompt-input-wrap:has(#image-stack.has-images) {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        align-self: stretch;
        min-height: 0;
        height: auto;
        padding: 7px var(--home-prompt-resize-handle-gutter, 40px) 7px 18px;
        gap: 0;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded > .prompt-input-wrap:not(:has(#image-stack.has-images)) {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        align-self: flex-start;
        width: calc(100% - 10px);
        max-width: calc(100% - 10px);
        box-sizing: border-box;
        --prompt-empty-action-row-h: calc(var(--prompt-empty-action-size, 22px) + 20px);
        min-height: var(--prompt-empty-action-row-h);
        height: var(--prompt-empty-action-row-h);
        padding: 0 18px;
        gap: 0;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > #image-stack:not(.has-images):not([hidden]) {
        display: block !important;
        position: relative;
        flex: 0 0 auto;
        align-self: center;
        width: var(--prompt-empty-action-size, 22px);
        height: var(--prompt-empty-action-size, 22px);
        min-width: var(--prompt-empty-action-size, 22px);
        min-height: var(--prompt-empty-action-size, 22px);
        margin: 0 8px 0 0;
        overflow: visible;
    }

    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded:not(.is-collapsing) .stack-add-card {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    html[data-mobile-home-chat-shell] .image-stack .stack-add-card.is-stack-icon {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        position: relative;
        overflow: visible;
        font-size: 0;
    }

    html[data-mobile-home-chat-shell] .image-stack .stack-add-card.is-stack-icon .stack-add-layer {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 34px;
        height: 44px;
        margin-left: -17px;
        margin-top: -22px;
        border-radius: 6px;
        background: var(--prompt-stack-surface-bg, rgba(255, 255, 255, 0.92));
        border: 1px solid var(--prompt-stack-surface-border, rgba(0, 0, 0, 0.08));
        transition: border-color 0.2s ease;
    }

    html[data-mobile-home-chat-shell] .image-stack .stack-add-card.is-stack-icon .stack-add-layer-3 {
        transform: rotate(4deg) translate(2px, 2px);
        z-index: 1;
        opacity: 0.7;
    }

    html[data-mobile-home-chat-shell] .image-stack .stack-add-card.is-stack-icon .stack-add-layer-2 {
        transform: rotate(-3deg) translate(-1px, 1px);
        z-index: 2;
        opacity: 0.85;
    }

    html[data-mobile-home-chat-shell] .image-stack .stack-add-card.is-stack-icon .stack-add-layer-1 {
        transform: rotate(-6deg);
        z-index: 3;
        border: 1.5px dashed var(--prompt-stack-surface-border-strong, rgba(0, 0, 0, 0.18));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    html[data-mobile-home-chat-shell] .image-stack .stack-add-card.is-stack-icon .stack-add-plus {
        font-size: 20px;
        font-weight: 300;
        line-height: 1;
        color: var(--prompt-stack-plus-color, rgba(0, 0, 0, 0.45));
        user-select: none;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > #image-stack:not(.has-images):not([hidden]):has(> .image-stack-upload-label[hidden]) {
        display: none !important;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > #image-stack.has-images {
        display: block;
        flex: 0 1 auto;
        min-width: 0;
        width: auto;
        max-width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
        align-self: center;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > #image-stack.has-images:has(> .mention-dropdown.is-reference-row-inline:not([hidden])) {
        display: flex;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > #image-stack.has-images .image-stack-cards {
        flex: 0 1 auto;
        width: max-content;
        min-width: 0;
        max-width: 100%;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded #image-stack-cards > .mobile-docked-stack-add-slot {
        position: relative;
        flex: 0 0 auto;
        flex-shrink: 0;
        align-self: center;
        width: 52px;
        height: var(--stack-card-h);
        min-width: 52px;
        min-height: var(--stack-card-h);
        margin: 0 0 0 8px;
        overflow: visible;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .mobile-docked-stack-add-slot .stack-placeholder {
        opacity: 0;
        visibility: hidden;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .mobile-docked-stack-add-slot > .image-stack-upload-label:not([hidden]) {
        position: absolute;
        inset: 0;
        display: block !important;
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 0;
        max-width: none;
        max-height: none;
        margin: 0;
        border: none !important;
        border-radius: 8px;
        background: var(--prompt-upload-idle-bg) !important;
        box-shadow: none;
        cursor: pointer;
        z-index: 3;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .mobile-docked-stack-add-slot > .image-stack-upload-label:not([hidden])::before {
        content: none;
        display: none;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #image-stack-cards > .stack-clear-all.is-mobile-docked-inline:not([hidden]) {
        position: relative;
        inset: auto;
        bottom: auto;
        left: auto;
        top: auto;
        right: auto;
        display: inline-flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        flex: 0 0 auto;
        align-self: center;
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        margin: 0 0 0 8px;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: var(--text-secondary, #646a73);
        box-shadow: none;
        z-index: 4;
        transition: background-color 0.12s ease, color 0.12s ease;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #image-stack-cards > .stack-clear-all.is-mobile-docked-inline:not([hidden]) svg {
        width: 14px;
        height: 14px;
        transform: none;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #image-stack-cards > .stack-clear-all.is-mobile-docked-inline:not([hidden]):hover,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #image-stack-cards > .stack-clear-all.is-mobile-docked-inline:not([hidden]):focus-visible {
        background: rgba(0, 0, 0, 0.04);
        /* 悬停要比静止更亮：#646a73 比 --text-secondary 还暗，
           悬停反而「变灰」，和旁边三个按钮的悬停（--text-primary）也对不上。 */
        color: var(--text-primary, #000000);
        box-shadow: none;
        outline: none;
    }

    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #image-stack-cards > .stack-clear-all.is-mobile-docked-inline:not([hidden]) {
        background: transparent;
        color: var(--text-secondary, #a8abb2);
    }

    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #image-stack-cards > .stack-clear-all.is-mobile-docked-inline:not([hidden]):hover,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded #image-stack-cards > .stack-clear-all.is-mobile-docked-inline:not([hidden]):focus-visible {
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) #image-stack-cards > #image-stack-upload-label {
        display: none !important;
        pointer-events: none !important;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap:has(.image-stack.has-images.is-expanded) {
        flex-direction: row;
        align-items: center;
        overflow: visible;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap:has(.image-stack.has-images.is-expanded) > #image-stack {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: none;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]) + .prompt-quick-prompts-toggle-btn:not([hidden]),
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]) + .prompt-input-expand-btn:not([hidden]),
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]) + .prompt-input-clear-btn:not([hidden]),
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]) + .prompt-input-clear-btn:not([hidden]) {
        margin-left: 16px;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]) {
        display: inline-flex;
        flex: 0 0 auto;
        align-self: center;
        width: 22px;
        height: 22px;
        margin: 0;
        background: transparent;
        color: var(--text-secondary, #646a73);
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]) {
        display: inline-flex;
        flex: 0 0 auto;
        align-self: center;
        width: 22px;
        height: 22px;
        margin: 0 0 0 16px;
        background: transparent;
        color: var(--text-secondary, #646a73);
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]) {
        display: inline-flex;
        flex: 0 0 auto;
        align-self: center;
        width: 22px;
        height: 22px;
        margin: 0 0 0 16px;
        background: transparent;
        color: var(--text-secondary, #646a73);
    }

    /* 工具栏靠右：由第一个可见的按钮吃掉剩余空间（margin-left: auto），
       其余按钮之间只留 16px 间隙。
       参考图行（#image-stack）不伸缩（flex: 0 1 auto），有参考图时输入框
       .prompt-field 又是 display: none —— 行里再没有别的东西去撑开右半边，
       所以这块空白必须交给按钮自己吃，否则按钮会紧贴着缩略图排到行中间。
       这几条原来都带 :not(:has(#image-stack.has-images))，即“只有没有参考图时才靠右”，
       一上传参考图按钮就失去 margin-left: auto，于是跑到中间去了。 */
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]) {
        margin-left: auto;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap:not(:has(> .prompt-optimize-btn:not([hidden]))) > .prompt-quick-prompts-toggle-btn:not([hidden]) {
        margin-left: auto;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap:not(:has(> .prompt-optimize-btn:not([hidden]))):not(:has(> .prompt-quick-prompts-toggle-btn:not([hidden]))) > .prompt-input-expand-btn:not([hidden]),
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap:not(:has(> .prompt-optimize-btn:not([hidden]))):not(:has(> .prompt-quick-prompts-toggle-btn:not([hidden]))):not(:has(> .prompt-input-expand-btn:not([hidden]))) > .prompt-input-clear-btn:not([hidden]) {
        margin-left: auto;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap:has(> .prompt-optimize-btn:not([hidden]), > .prompt-quick-prompts-toggle-btn:not([hidden])) > .prompt-input-expand-btn:not([hidden]) {
        margin-left: 16px;
    }

    /* 深色：图标用和「@ 引用」按钮同一个次要文字色。
       注意选择器必须把两个属性写在同一个 html[...] 上：
       data-theme 和 data-mobile-prompt-editor-docked 都挂在 <html> 上，
       若写成「[data-theme] 空格 html[data-mobile-prompt-editor-docked]」，
       就变成「html 的祖先里有 data-theme」—— html 的祖先只有 #document，
       永远不匹配，整块规则是死的。上一版就是这么死的，
       结果深色下优化 / 预设 / 清空一直用着浅色灰 #646a73。 */
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]),
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]),
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]) {
        background: transparent;
        color: var(--text-secondary, #a8abb2);
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]) {
        display: inline-flex;
        flex: 0 0 auto;
        align-self: center;
        width: 22px;
        height: 22px;
        margin: 0 0 0 16px;
        background: transparent;
        color: var(--text-secondary, #646a73);
    }

    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]) {
        background: transparent;
        color: var(--text-secondary, #a8abb2);
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):hover,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):focus-visible,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):focus,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):hover,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):focus-visible,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):focus,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):hover,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):focus-visible,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):focus,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):hover,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):focus-visible,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):focus {
        background: rgba(0, 0, 0, 0.04);
        color: var(--text-primary, #000000);
        outline: none;
    }

    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):hover,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):focus-visible,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):focus,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):hover,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):focus-visible,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):focus,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):hover,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):focus-visible,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):focus,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):hover,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):focus-visible,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):focus {
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
        outline: none;
    }

    html[data-theme="light"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):hover,
    html[data-theme="light"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):focus-visible,
    html[data-theme="light"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):focus,
    html[data-theme="light"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):hover,
    html[data-theme="light"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):focus-visible,
    html[data-theme="light"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):focus,
    html[data-theme="light"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):hover,
    html[data-theme="light"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):focus-visible,
    html[data-theme="light"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):focus,
    html[data-theme="light"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):hover,
    html[data-theme="light"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):focus-visible,
    html[data-theme="light"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):focus {
        background: rgba(0, 0, 0, 0.04);
        color: var(--text-primary, #000000);
        outline: none;
    }

    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):hover,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):focus-visible,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):focus,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):hover,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):focus-visible,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):focus,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):hover,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):focus-visible,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):focus,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):hover,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):focus-visible,
    html[data-theme="dark"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):focus {
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
    }

    @media (prefers-color-scheme: light) {
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):hover,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):focus-visible,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):focus,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):hover,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):focus-visible,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):focus,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):hover,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):focus-visible,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):focus,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):hover,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):focus-visible,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):focus {
            background: rgba(0, 0, 0, 0.04);
            color: var(--text-primary, #000000);
            outline: none;
        }
    }

    @media (prefers-color-scheme: dark) {
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):hover,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):focus-visible,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-optimize-btn:not([hidden]):focus,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):hover,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):focus-visible,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-quick-prompts-toggle-btn:not([hidden]):focus,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):hover,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):focus-visible,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-expand-btn:not([hidden]):focus,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):hover,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):focus-visible,
        html[data-theme="system"][data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap > .prompt-input-clear-btn:not([hidden]):focus {
            background: rgba(255, 255, 255, 0.06);
            color: #ffffff;
        }
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap .image-stack:not(.has-images),
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap .image-stack.has-images:not(.is-expanded) {
        margin-top: 0;
        align-self: center;
    }

    /* 悬停 / 聚焦放大时不再重算按钮位置：按钮跟着缩略图一起缩放，
       位置由基础规则（关闭在右上角、替换在底边居中）决定。这里只负责放大反馈。 */
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item:hover .item-inner .remove-img:hover,
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item:hover .item-inner .remove-img:focus-visible,
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item:focus-within .item-inner .remove-img:hover,
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item:focus-within .item-inner .remove-img:focus-visible,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded .image-stack-item:hover .item-inner .remove-img:hover,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded .image-stack-item:hover .item-inner .remove-img:focus-visible,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded .image-stack-item:focus-within .item-inner .remove-img:hover,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded .image-stack-item:focus-within .item-inner .remove-img:focus-visible {
        transform: scale(1.1) !important;
    }

    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item:hover .item-inner .replace-img:hover,
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item:hover .item-inner .replace-img:focus-visible,
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item:focus-within .item-inner .replace-img:hover,
    html[data-mobile-home-chat-shell] .image-stack.has-images.is-expanded .image-stack-item:focus-within .item-inner .replace-img:focus-visible,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded .image-stack-item:hover .item-inner .replace-img:hover,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded .image-stack-item:hover .item-inner .replace-img:focus-visible,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded .image-stack-item:focus-within .item-inner .replace-img:hover,
    html[data-mobile-prompt-editor-docked] .image-stack.has-images.is-expanded .image-stack-item:focus-within .item-inner .replace-img:focus-visible {
        /* 放大反馈只有 scale（居中靠 margin-left，不经过 transform，第 164 轮） */
        transform: scale(1.1) !important;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-wrap .prompt-field {
        display: none !important;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded > .prompt-input-editor {
        flex: 0 1 auto;
        align-self: stretch;
        width: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 10px 6px 4px var(--mobile-home-prompt-chip-label-inset, 13px);
        border-top: none !important;
        box-sizing: border-box;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded:not(.is-prompt-input-hero-maximized) > .prompt-input-editor .prompt-input,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded:not(.is-prompt-input-hero-maximized) > .prompt-input-editor .prompt-editable {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        min-height: 1.5em;
        line-height: 1.5;
        box-sizing: border-box;
        overscroll-behavior: contain;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded:not(.is-prompt-input-hero-maximized) > .prompt-input-editor .prompt-editable:empty,
    html[data-mobile-prompt-editor-docked] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded:not(.is-prompt-input-hero-maximized) > .prompt-input-editor .prompt-editable.is-prompt-empty {
        padding: 0 !important;
        min-height: 1.5em !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-input,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-editable {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto !important;
        max-height: 300px !important;
        min-height: 0 !important;
        line-height: 1.5 !important;
        white-space: pre-wrap;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        text-overflow: unset;
        caret-color: var(--text-primary);
        -webkit-user-select: text;
        user-select: text;
    }

    /* 空态时用 block 撑满 editor 区域，避免 inline 空 contenteditable 在 iOS 上无光标 */
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-editable:empty {
        display: block !important;
        width: 100% !important;
        min-height: 1.5em !important;
        box-sizing: border-box;
        padding: 0 !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-textarea-wrap.has-content .prompt-input,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-textarea-wrap.has-content .prompt-editable {
        padding-top: 0;
        padding-left: 0;
        padding-right: 30px;
        padding-bottom: 0;
        box-sizing: border-box;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-textarea-wrap.has-content .prompt-input-clear-btn:not([hidden]) {
        display: inline-flex;
        margin-left: 2px;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-editable:empty::before {
        height: auto;
        line-height: 1.5;
        white-space: normal;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-toolbar {
        position: relative;
        z-index: 2;
        transform: none;
        right: auto;
        top: auto;
        width: 100%;
        flex: 0 0 auto;
        display: flex !important;
        padding: 0 8px 8px;
        margin: 0;
        background: transparent;
        border-bottom-left-radius: calc(var(--radius-lg) - 4px) !important;
        border-bottom-right-radius: calc(var(--radius-lg) - 4px) !important;
        overflow: hidden;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .prompt-toolbar-row {
        display: flex !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded .generate-btn-wrap {
        margin: 0 !important;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero.is-prompt-composer-maximized:not(:has(> .hero-results:not([hidden]))) {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        overflow: hidden !important;
        min-height: 0;
        padding-bottom: max(12px, calc(12px + var(--safe-bottom))) !important;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero.is-prompt-composer-maximized:not(:has(> .hero-results:not([hidden]))) > .hero-content,
    html[data-mobile-home-chat-shell] #panel-home .hero.is-prompt-composer-maximized:not(:has(> .hero-results:not([hidden]))) > .quick-prompts,
    /* 创作目标区也要让位，否则创作栏只能拿到剩余高度、看起来没铺满整屏 */
    html[data-mobile-home-chat-shell] #panel-home .hero.is-prompt-composer-maximized:not(:has(> .hero-results:not([hidden]))) > .home-create-goals {
        display: none !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:not(:has(> .hero-results:not([hidden]))), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:not(:has(> #hero-results:not([hidden])))) > .prompt-box.is-prompt-expanded.is-prompt-input-hero-maximized {
        /* 最大化：脱离「贴底悬浮」绝对定位，交给 hero 的 column flex 撑满；
           否则 top/bottom 同时生效会锁死高度，点放大看起来没反应 */
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        flex: 1 1 auto !important;
        align-self: center !important;
        width: calc(100% - (var(--mobile-home-prompt-box-inset, 10px) * 2)) !important;
        max-width: calc(100% - (var(--mobile-home-prompt-box-inset, 10px) * 2)) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-inline: auto !important;
        transform: none !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        --hero-maximized-input-toolbar-gap: 12px;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero.is-prompt-composer-maximized:has(> .hero-results:not([hidden])),
    html[data-mobile-home-chat-shell][data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden])).is-prompt-composer-maximized {
        overflow: hidden !important;
        min-height: 0;
        padding-bottom: max(12px, calc(12px + var(--safe-bottom))) !important;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero.is-prompt-composer-maximized:has(> .hero-results:not([hidden])) > .hero-results,
    html[data-mobile-home-chat-shell][data-wf-chat-home-mounted] #wf-chat-panel-home-host.is-prompt-composer-maximized:has(> #hero-results:not([hidden])) > #hero-results {
        flex: 0 0 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 0;
        pointer-events: none;
        border: none !important;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box.is-prompt-expanded.is-prompt-input-hero-maximized {
        /* 有对话时基础规则把创作栏锁成「贴底悬浮」（top/bottom 同时生效 → 高度锁死、点放大没反应）。
           最大化改为：顶边让出顶栏、底边让出免责声明，纵向铺满整屏 */
        position: absolute !important;
        /* 顶边落在顶栏下缘再往下 10px（= 左右那圈 --mobile-home-prompt-box-inset）。
           这里原本写的是 top: 0，而 hero 顶边就在屏幕顶（聊天要从顶栏后方穿过，见上面的 .hero 规则），
           于是最大化的创作栏会顶到 y=0、被 z-index:50 的顶栏压住一截：
           顶栏文字飘在创作栏圆角里、创作栏自己的首行也藏在顶栏底下。
           --topbar-h 在 .hero 作用域内等于顶栏实际高度（含安全区），所以这里能精确贴住。 */
        top: calc(var(--topbar-h, 52px) + var(--mobile-home-prompt-box-inset, 10px)) !important;
        left: var(--mobile-home-prompt-box-inset, 10px) !important;
        right: var(--mobile-home-prompt-box-inset, 10px) !important;
        bottom: calc(var(--safe-bottom, 0px) + var(--hero-disclaimer-stack, 0px)) !important;
        flex: 1 1 auto !important;
        /* 关键：绝对定位盒子若 align-self 非 auto，Chrome 会按 fit-content 收缩并按该对齐，
           top/bottom 拉伸随之失效（看起来没最大化）→ 必须回到 auto */
        align-self: auto !important;
        width: auto !important;
        max-width: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transform: none !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        --hero-maximized-input-toolbar-gap: 12px;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-input-hero-maximized > .prompt-input-wrap,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-input-hero-maximized > .mode-nav-row {
        flex: 0 0 auto;
        flex-shrink: 0;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-input-hero-maximized > .prompt-input-editor {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-bottom: 0;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-input-hero-maximized > .prompt-toolbar {
        flex: 0 0 auto;
        flex-shrink: 0;
        margin-top: auto;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-input-hero-maximized .prompt-textarea-wrap {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-input-hero-maximized #prompt-input,
    html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-input-hero-maximized .prompt-editable {
        flex: 1 1 auto;
        min-height: 0 !important;
        width: 100%;
        height: auto !important;
        max-height: none !important;
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box;
        overflow: auto;
        overscroll-behavior: contain;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    html[data-mobile-home-chat-shell] #panel-home .hero.is-prompt-composer-maximized .prompt-box .chip-dropdown-menu {
        top: auto;
        bottom: 100%;
        padding-top: 0;
        padding-bottom: 6px;
        transform: translateY(4px);
    }

    html[data-mobile-home-chat-shell] #panel-home .hero.is-prompt-composer-maximized .prompt-box .chip-dropdown.is-open .chip-dropdown-menu {
        transform: translateY(0);
        z-index: 420;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .hero:has(> .hero-results:not([hidden])), html[data-wf-chat-home-mounted] #wf-chat-panel-home-host:has(> #hero-results:not([hidden]))) > .prompt-box {
        border-radius: 0;
    }

}

/* ========== AI 创作页：队列统计移入顶栏、新建按钮移到顶栏右侧 ========== */
@media (max-width: 900px) {

    /* 移动端：模型/设置按钮的下拉菜单显示在按钮上方 */
    .ai-create-menu {
        bottom: calc(100% + 8px) !important;
        top: auto !important;
        max-height: 50vh;
    }

    /* 按钮在菜单打开时箭头朝下 */
    .ai-create-setting-btn.is-open svg {
        transform: rotate(0deg) !important;
    }

    /* 窄屏上两颗参数 chip 等分整行：390px 的机器算下来每颗 ~177px，
       模型名（12px、约 130px）+ 内边距 + 箭头 ≈ 168px，本来就放得下。
       这里把内边距和箭头间距各收一点，纯粹是给长模型名多留一档余量。
       只在窄屏生效 —— 桌面端每颗 217px 有富余，不用跟着变小。 */
    .ai-create-setting-btn {
        padding: 6px 8px;
        gap: 2px;
    }

    /* AI 图片/视频工作台：移动端恢复顶栏（桌面端 42-ai-create.css 隐藏），与首页同款先例 */
    html:has(#panel-ai-create.is-active) .main:has(#panel-ai-create.is-active) {
        --topbar-h: calc(var(--topbar-row-top, max(10px, env(safe-area-inset-top, 0px))) + var(--topbar-sync-chrome-h, 32px) + 10px);
    }

    html:has(#panel-ai-create.is-active) .main:has(#panel-ai-create.is-active) .topbar {
        display: flex !important;
        /*
         * 顶栏不被内容挤压。
         * .main 是 height:100dvh 的竖向 flex 容器，本页内容超高时顶栏（flex-shrink 默认 1）
         * 会被压矮 3px（52px → 49px），于是 --topbar-h 与实际渲染高度对不上，
         * 「创作设置」展开面板按 --topbar-h 定位就会多出 3px 间隙、且比设计值矮 3px。
         * 与首页同款处理：html[data-mobile-home-chat-shell] ... .topbar { flex: 0 0 auto }
         */
        flex: 0 0 auto;
    }

    /* 删除队列标题栏（任务队列标题 + 收起按钮） */
    #panel-ai-create .ai-create-queue-head {
        display: none !important;
    }

    /* 顶栏中的统计/新建按钮：仅 AI 创作页激活时显示 */
    .topbar .ai-create-queue-stats,
    .topbar #ai-create-new {
        display: none;
    }

    html:has(#panel-ai-create.is-active) .topbar .ai-create-queue-stats,
    html:has(#panel-ai-create.is-active) .topbar #ai-create-new {
        display: flex;
    }

    /* 统计卡改横向紧凑样式融入顶栏（结构已换成方向按钮同款：thumb + copy + chevron） */
    html:has(#panel-ai-create.is-active) .topbar .ai-create-queue-stats {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: auto;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        height: 30px;
        cursor: pointer;
    }

    html:has(#panel-ai-create.is-active) .topbar .ai-create-queue-stats-thumb,
    html:has(#panel-ai-create.is-active) .topbar .ai-create-queue-stats-chevron {
        display: none;
    }

    html:has(#panel-ai-create.is-active) .topbar .ai-create-queue-stats-copy {
        flex-direction: row;
        align-items: baseline;
        gap: 12px;
    }

    html:has(#panel-ai-create.is-active) .topbar .ai-create-queue-stats-title,
    html:has(#panel-ai-create.is-active) .topbar .ai-create-queue-stats-desc {
        flex-direction: row;
        align-items: baseline;
        gap: 5px;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-secondary, #64748b);
    }

    html:has(#panel-ai-create.is-active) .topbar .ai-create-queue-stats-title strong,
    html:has(#panel-ai-create.is-active) .topbar .ai-create-queue-stats-desc strong {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary, #1a1a1a);
    }

    /* 统计右侧显示向右箭头，提示点击弹出草稿列表 */
    html:has(#panel-ai-create.is-active) .topbar .ai-create-queue-stats::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -19px;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
        pointer-events: none;
    }

    /* 顶栏新建按钮：样式对齐左侧收起侧边栏那枚菜单图标（span.app-sidebar-logo-menu-icon）
       —— 只有字形，没有底色、没有描边、没有阴影。

       原来是 30px 的实心圆 + 投影，摆在一颗纯字形图标的同一根顶栏里像是两套设计语言；
       而且它的底色是 --bg-base（页面底色），在半透明玻璃顶栏上是一块「挖出来的洞」。
       图标本身改成 18px / stroke 1.4，与 .app-sidebar-logo-menu-icon svg 完全一致。 */
    html:has(#panel-ai-create.is-active) .topbar #ai-create-new {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        padding: 0;
        justify-content: center;
        gap: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-primary);
        box-shadow: none;
        /* 右移 20px：仅视觉位移，不影响顶栏其它元素的布局与居中 */
        transform: translateX(20px);
    }

    html:has(#panel-ai-create.is-active) .topbar #ai-create-new > span:not(.ai-create-new-plus) {
        display: none;
    }

    html:has(#panel-ai-create.is-active) .topbar #ai-create-new .ai-create-new-plus svg {
        width: 18px;
        height: 18px;
    }

    /* 静止态没有底，hover / 键盘聚焦时补一层极淡的圆底作为反馈 ——
       参考图那枚是导航开关、不需要反馈，这颗是「新建」动作，完全没有反馈会显得点不动。
       用 --bg-elev-2（亮色下是浅灰、深色下是浅白），两个主题都不用单独写。 */
    html:has(#panel-ai-create.is-active) .topbar #ai-create-new:hover,
    html:has(#panel-ai-create.is-active) .topbar #ai-create-new:focus-visible {
        background: var(--bg-elev-2);
        color: var(--text-primary);
        outline: none;
    }

    /* 草稿列表弹层：点击顶栏新建按钮后在顶栏下方居中弹出 */
    #ai-create-drafts-popover {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        /* top 由 JS 按顶栏底边实时计算 */
        z-index: 60;
        width: min(420px, calc(100vw - 24px));
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        border: 1px solid var(--border-soft);
        border-radius: 16px;
        /* 不用 --bg-base：与页面底色相同会"隐形"，用与创作面板一致的卡面色 */
        background: #fff;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
        box-sizing: border-box;
        animation: ai-create-drafts-pop-in 0.18s ease;
    }

    [data-theme="dark"] #ai-create-drafts-popover {
        background: #1a1b1f;
    }

    /* 任务卡那一列已经撤了（见 42-ai-create.css 里那条说明）：
       弹层里现在只有草稿列表 + 那排多选键，这条给任务卡补边框的规则没有对象了。 */

    #ai-create-drafts-popover[hidden] {
        display: none;
    }

    #ai-create-drafts-popover .ai-create-drafts {
        width: 100%;
    }

    /* 队列头（编辑 / 删除）被 JS 搬进这个弹层，排在草稿列表上面。
       两层原因叠加：
       ① 移动端整条队列头是藏起来的（`#panel-ai-create .ai-create-queue-head`），
          但那两条规则的选择器都锚在 #panel-ai-create 上，弹层挂在 body 下不匹配 ——
          搬出来它自然就露面了，不用再写一条 !important 去救；
       ② 多选得有个入口：桌面端这个入口是队列头那颗「编辑」，移动端草稿就在弹层里，
          入口放在同一张卡上最顺。
       编辑态下新建键是隐藏的（那条规则只收队列头里的那一颗），弹层里就剩
       「取消 + 全选 + 删除(n)」三颗，平分这一行（弹层比 196px 的队列宽得多，放得下）。 */
    #ai-create-drafts-popover .ai-create-queue-head {
        display: flex;
        margin: 0 0 8px;
    }

    /* 弹层里的删除按钮做高一点，跟草稿卡同一档触控高度 */
    #ai-create-drafts-popover .ai-create-head-btn {
        height: 34px;
    }

    /* 触屏无 hover：草稿删除按钮常显 */
    #ai-create-drafts-popover .ai-create-draft-del {
        opacity: 1;
        pointer-events: auto;
        /* 这里比桌面大一圈（24px），但贴角的偏移量跟桌面是同一个数（6px）：
           钮收进卡片之后，偏移只由「贴角内侧几 px」决定，和钮自己的尺寸无关。
           上一版是「中心点压在角上」，那颗 24px 的钮得各挪 12-6=6px 才能把中心
           对到「角往里 6px」—— 于是桌面 -4px、触屏 -6px，两颗钮在两张列表里
           不是一套。卡片没有描边（见 42-ai-create.css 那条注释），不用另减 1px。 */
        top: 6px;
        right: 6px;
        width: 24px;
        height: 24px;
    }

    #ai-create-drafts-popover .ai-create-drafts-empty {
        display: none;
        padding: 18px 0;
        font-size: 13px;
        color: var(--text-tertiary, #8a8f98);
        text-align: center;
    }

    #ai-create-drafts-popover:has(.ai-create-drafts[hidden]) .ai-create-drafts-empty {
        display: block;
    }

    /* 弹层内的任务卡列表：强制显示（默认 display:none，仅队列展开时显示），排在草稿下方 */
    #ai-create-drafts-popover #ai-create-queue-list {
        display: flex;
        flex: 0 0 auto;
        overflow: visible;
        margin-top: 2px;
    }

    #ai-create-drafts-popover #ai-create-queue-list:empty {
        display: none;
    }

    /* 移动端：目标选择面板标题"你想创作什么？"上移15px */
    .ai-create-goal-menu .ai-create-goal-head {
        margin-top: -15px;
    }
}

/* ========== 灵感模板详情：移动端底部卡片（Bottom Sheet）样式 ========== */
@media (max-width: 900px) {

    /* 遮罩背景：Flex 主轴为纵向，因此用 justify-content:flex-end 把卡片推到视口底部，
       避免之前误用 align-items:flex-end 在 column 方向下导致卡片垂直居中，底部露出灰色遮罩 */
    .template-detail-view {
        background: rgba(0, 0, 0, 0.5);
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    html.is-template-detail-open .template-detail-view {
        position: fixed;
        inset: 0;
        z-index: 120;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 底部卡片容器：固定 90vh，确保每次弹起高度一致；
       使用 relative 而非 absolute，避免部分浏览器在 fixed 父元素中定位异常导致弹层偶尔不出现 */
    .template-detail-layout {
        display: flex !important;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 90vh;
        max-height: 90vh;
        min-height: 0;
        background: var(--bg-base);
        border-radius: 20px 20px 0 0;
        overflow: hidden;
        box-sizing: border-box;
        grid-template-areas: none;
        grid-template-rows: none;
    }

    /* 拖动指示器 */
    .template-detail-layout::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--border-soft, rgba(128, 128, 128, 0.3));
        z-index: 10;
        pointer-events: none;
    }

    /* 图片区：图片/视频占满容器宽度，高度200-280px，避免底部按钮遮挡 */
    .template-detail-stage {
        padding: 0;
        flex: 0 0 auto;
        min-height: 200px;
        max-height: 280px;
        overflow: hidden;
        position: relative;
        background: transparent;
    }

    .template-detail-media-wrap {
        padding-right: 0;
        width: 100%;
        height: auto;
        min-height: 200px;
        max-height: 280px;
        overflow: hidden;
    }

    .template-detail-media-frame {
        width: 100%;
        height: auto;
        min-height: 200px;
        max-height: 280px;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .template-detail-media {
        width: 100%;
        height: auto;
        min-height: 200px;
        max-height: 280px;
        max-width: 100%;
        object-fit: contain;
        object-position: center;
        box-shadow: none;
        border-radius: 0;
    }

    /* 右侧导航列：改为浮动在图片右下角的横向按钮组 */
    .template-detail-nav-col {
        position: absolute;
        right: 8px;
        bottom: 8px;
        top: auto !important;
        left: auto;
        transform: none !important;
        flex-direction: row;
        gap: 8px;
        z-index: 5;
    }

    /* 上下导航按钮隐藏 */
    .template-detail-nav-buttons {
        display: none !important;
    }

    /* 收藏按钮：改为横向排列，圆形半透明毛玻璃 */
    .template-detail-like {
        flex-direction: row;
        gap: 4px;
        min-width: auto;
    }

    .template-detail-like-mark {
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.65) !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    }

    .template-detail-like-mark svg {
        width: 18px;
        height: 18px;
    }

    .template-detail-like-count,
    #template-detail-like-count {
        display: none;
    }

    /* 侧边操作按钮组：横向排列 */
    .template-detail-side-actions {
        flex-direction: row;
        gap: 8px;
        margin-top: 0;
    }

    .template-detail-side-action {
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.65) !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    }

    .template-detail-side-action svg {
        width: 18px;
        height: 18px;
    }

    /* 侧边栏：纵向排列，全宽；min-height:0 允许在 90vh 卡片内收缩 */
    .template-detail-sidebar {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        border-left: none !important;
        background: transparent;
    }

    /* 侧边栏关闭按钮隐藏 */
    .template-detail-sidebar-close {
        display: none !important;
    }

    /* 头部 */
    .template-detail-head {
        grid-area: auto;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 16px !important;
        border-bottom: none !important;
        flex-shrink: 0;
        background: transparent;
    }

    /* 滚动内容区：在 sidebar 内部滚动，为 footer 留出空间 */
    /* 滚动内容区：在 sidebar 内部滚动，为底部悬浮按钮留出空间 */
    .template-detail-scroll {
        grid-area: auto;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 16px !important;
        padding-bottom: 80px !important;
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 桌面端底部操作区：移动端隐藏，改为在滚动内容区内悬浮显示 */
    .template-detail-footer {
        display: none !important;
    }

    /* 底部操作按钮：黑色背景，宽度平分 */
    .template-detail-action {
        flex: 1 1 0;
        min-width: 0;
        min-height: 36px;
        height: 36px;
        padding: 0 14px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        background: #000 !important;
        color: #fff !important;
        border-radius: 999px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    .template-detail-action svg {
        width: 18px;
        height: 18px;
    }

    /* 放大按钮：继承侧边栏按钮样式（与举报按钮同行） */
    .template-detail-zoom-btn {
        background: rgba(255, 255, 255, 0.3) !important;
        color: #fff !important;
    }

    .template-detail-action svg {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
    }

    .template-detail-action span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 移动端：两个操作按钮悬浮在弹层底部 */
    .template-detail-mobile-actions {
        display: flex;
        gap: 8px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        margin: 0;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-top: none;
        border-radius: 0;
        box-sizing: border-box;
        z-index: 10;
        justify-content: center;
    }

    /* 参考图缩略图适当缩小 */
    .template-detail-ref-thumb {
        width: 48px;
        height: 48px;
    }

    /* 全屏查看弹层 */
    .template-detail-zoom-view {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .template-detail-zoom-view[hidden] {
        display: none !important;
    }

    .template-detail-zoom-media {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
    }

    /* 放大后的图片/视频圆角与详情弹层一致 */
    .template-detail-zoom-media video,
    .template-detail-zoom-media img {
        border-radius: 20px;
        overflow: hidden;
    }

    .template-detail-zoom-close {
        position: absolute;
        top: max(12px, var(--safe-top));
        right: max(12px, var(--safe-right));
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
    }

    .template-detail-zoom-close svg {
        width: 22px;
        height: 22px;
    }

    /* 亮色主题适配 */
    [data-theme="light"] .template-detail-view {
        background: rgba(0, 0, 0, 0.5);
    }

    [data-theme="light"] .template-detail-layout,
    [data-theme="light"] .template-detail-stage,
    [data-theme="light"] .template-detail-sidebar,
    [data-theme="light"] .template-detail-head {
        background: var(--bg-base, #fff);
    }

    @media (prefers-color-scheme: light) {
        [data-theme="system"] .template-detail-view {
            background: rgba(0, 0, 0, 0.5);
        }
        [data-theme="system"] .template-detail-layout,
        [data-theme="system"] .template-detail-stage,
        [data-theme="system"] .template-detail-sidebar,
        [data-theme="system"] .template-detail-head {
            background: var(--bg-base, #fff);
        }
    }

    /* ---------------------------------------------------------------- 第 624 轮（移动端需求）：
       ①「@div#user-menu-wrap 不显示背景色」—— 侧栏底部那颗用户胶囊（.user-menu-wrap
          .is-sidebar-docked）整层底去掉：常态原本铺 --bg-elev-2（浅色 7% 墨），
          第 606/613/614 轮又把它改成头像那支蓝（--user-avatar-chrome-bg / #3b83f6），
          于是整颗看着就是一颗大一号的蓝芯片。手机端整颗透明，只剩中间那颗蓝色头像
          （头像自己的底色不变，仍是 #3b83f6），悬停 / 聚焦 / 展开菜单也不再上色 ——
          悬停反馈交给里头那颗头像自己的 scale(1.08)（03-app-sidebar.css 里那条，仍在）。
          ⚠️ 那几组底色算到 (0,5,0)~(0,7,0)（含 [data-theme] 两支与 .is-collapsed 一档），
             普通写法压不住，这里用 !important 一了百了：本文件在 03 之后，规则也只落在
             手机内侧栏那颗芯片上，桌面端那一版不受影响。
       ②「@button#asset-library-pick-cancel 改成胶囊型」—— 挑选栏里的「取消」
         （24-asset-library.css 的 .asset-library-pick-actions .btn-secondary 写死 6px 圆角）
         改成整颗圆头。旁边那颗「确认选择」不在需求里，保持原样。
       ③ 四颗下拉（分类标题 / 排序 / 筛选 /「更多」）在手机端改成「点击开合」——
         逻辑在 11-auth-boot.js 的 canHoverPointer，样式这边不需要配合。 */
    .app-sidebar-user-wrap-host .user-menu-wrap.is-sidebar-docked,
    .app-sidebar-user-wrap-host .user-menu-wrap.is-sidebar-docked:hover,
    .app-sidebar-user-wrap-host .user-menu-wrap.is-sidebar-docked:focus-visible,
    .app-sidebar-user-wrap-host .user-menu-wrap.is-sidebar-docked.is-menu-open,
    .app-sidebar-footer .user-menu-wrap.is-sidebar-docked,
    .app-sidebar-footer .user-menu-wrap.is-sidebar-docked:hover,
    .app-sidebar-footer .user-menu-wrap.is-sidebar-docked:focus-visible,
    .app-sidebar-footer .user-menu-wrap.is-sidebar-docked.is-menu-open {
        background: transparent !important;
    }

    #asset-library-pick-cancel {
        border-radius: 999px;
    }

    /* ---------------------------------------------------------------- 第 626 轮（移动端需求）：
       ① 三颗下拉（分类标题 / 排序 / 筛选）的面板居中在触发键正下方 ——
          逻辑在 11-auth-boot.js 的 resolveCloudStoragePopoverLeft，样式这边不用配合。
       ②「@button#asset-library-search-btn @button#materials-new-folder 图标颜色改成黑色」——
          这两颗的图标分别走 --text-secondary（72% 墨，实测 rgba(26,21,35,.72)）与
          --asset-library-icon-color（#9a9a9a），都不到黑；手机端统一给到 #000。
       ③「@div#cloud-storage-folders 显示背景色」—— 文件夹那一行原来透明，
          给它铺一层与素材分区同档的 --bg-elev-2（`#asset-library-modal .materials-page`
          那条就是这个底），圆角也跟分区同款 12px。行内第一格自带 21px 内衬（78px 缩略图
          居中在 120px 轨道里），不用再补 padding。
       ④「@button#materials-record-mic @button#materials-upload-btn 这两个按钮移除透明效果
          然后大小要一致并且背景色为白色添加阴影然后居中显示」—— 两颗统一 36px、纯白底
          （--modal-card-bg，不透明）、同一层投影、图标都给 20px；
          位置原来是「上传键居中 + 录音键挂在它左边 26px」，现在改成**两颗作为一个整体居中**
          （36 + 8 空档 + 36 = 80，整组左缘落在中线左边 40 ⇒ 录音键 -40、上传键 +4）。 */
    #asset-library-modal .asset-library-search-btn,
    #asset-library-modal .asset-library-new-folder-slot .cloud-storage-folder-plus {
        color: #000;
    }

    #asset-library-modal .asset-library-modal-body > .cloud-storage-folders {
        background: var(--bg-elev-2);
        border-radius: 12px;
    }

    /* 第 1488 轮（用户原话）：「@button#materials-record-mic @button#materials-upload-btn
       背景色改成黑色图标白色」—— 626 轮是「纯白底 + 墨色图标」，这里反色；
       投影留着（压在缩略图上才看得清边界），尺寸 / 位置一律不动。 */
    #asset-library-modal #panel-materials #materials-record-mic {
        width: 36px;
        height: 36px;
        min-height: 36px;
        background: var(--text-primary, #1a1523);
        color: #fff;
        opacity: 1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    }

    #asset-library-modal #panel-materials #materials-record-mic svg {
        width: 20px;
        height: 20px;
        color: #fff;
    }

    #asset-library-modal #panel-materials #materials-upload-btn {
        background: var(--text-primary, #1a1523);
        color: #fff;
        opacity: 1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
        transform: translateX(4px);
    }

    #asset-library-modal #panel-materials #materials-upload-btn svg,
    #asset-library-modal #panel-materials #materials-upload-btn .materials-toolbar-btn-label {
        color: #fff;
    }

    #asset-library-modal #panel-materials .materials-record {
        transform: translateX(calc(-100% - 4px));
    }

    /* ---------------------------------------------------------------- 第 627 轮（移动端需求）：
       ①「@div(.cloud-storage-folder-thumbs) 背景色要和 @div(.cloud-storage-item-preview)
          的背景色一致」—— 文件夹磁贴里那层缩略图底原来透明（露的是父级 #f1f1f1 那张浅灰皮），
          改成网格卡片同款的 `--bg-elev-3` 88% 半透明底（与 24 里 item-preview 那条同源）。
       ②「@button#asset-library-pick-confirm 改成胶囊型」—— 跟上一轮那颗「取消」凑一对
          （24 里这两颗共用 6px 圆角，手机端各给一次 999px；id 权重压得过那条类选择器）。
       ③「@div#asset-library-pick-bar 高度减少 20px」—— 112 → 92：砍的是提示那行自己的
          20px 下外边距（底内衬 12 + 提示 20 + 外边距 20 + 行距 10 + 按钮 38 + 底内衬 12 = 112）。
       ④「@button#asset-library-search-btn / @button#materials-new-folder 距离
          @div#cloud-storage-folders 的顶边要 20px」—— 那两颗键 86..120（行底 128 = 加了下内衬 8），
          而分区前的内容流从 138 起（body 顶 128 + 上内衬 10）⇒ 文件夹那行 `margin-top: 2px`
          （原来是 6px），顶边落在 140 = 键底 120 + 20。 */
    #asset-library-modal .cloud-storage-folder-thumbs {
        background: color-mix(in srgb, var(--bg-elev-3, #e8e8e8) 88%, transparent);
    }

    #asset-library-pick-confirm {
        border-radius: 999px;
    }

    #asset-library-modal .asset-library-pick-bar .asset-library-pick-hint {
        margin-bottom: 0;
    }

    #asset-library-modal .asset-library-modal-body > .cloud-storage-folders {
        margin-top: 2px;
    }

    /* ---------------------------------------------------------------- 第 629 轮（移动端需求）：
       ①「@div(.cloud-storage-folder) 要垂直居中」—— 文件夹磁贴里那排缩略图（1~2 张时只有一行）
          原来钉在顶部（24 里那条 `align-content: start`，当时的理由是「从左上往右显示」）；
          手机端改成竖直居中 —— 缩略图**尺寸不动**（还是 2 列 × 23px 那套），只把整排挪到中间，
          1~2 张的空档不再全堆在下半格（3~4 张时高度本来就填满，center 与 start 同结果）。
       ②「@button#asset-library-search-btn @button#materials-new-folder 如果是从资产库选择界面
          就不显示这两个按钮」—— 挑选模式下分类已经锁死（tabs 整行藏了），搜索 / 新建都点不动，
          两个**容器**（搜索盒 /「更多」槽位）一起藏掉。
          ⚠️ 24 里有一条 `html.is-asset-library-pick-materials … #materials-new-folder
          { display: flex !important }`（当初为了让「多选文件夹」在挑选模式里也能点）——
          那条只管按钮自己，这里藏的是它的槽位，所以压得住；真要恢复那个入口，得把槽位一起放出来。 */
    #asset-library-modal .cloud-storage-folder-thumbs {
        align-content: center;
    }

    html.is-asset-library-pick-materials #asset-library-modal .asset-library-search-box,
    html.is-asset-library-pick-materials #asset-library-modal .asset-library-new-folder-slot {
        display: none !important;
    }
}

/* ---------------------------------------------------------------- 第 621 轮：手机端发送键里的
   积分 ↔ 箭头循环切换。

   需求：「@span.generate-btn-icon 改成积分和箭头图标循环切换显示动画，积分文字和箭头图标要居中显示」。

   两件东西叠在同一个 36px 圆里，各占半个周期 —— 5s 一轮：箭头 0%–48%（≈2.4s），
   0.35s 交叉淡入淡出，积分 55%–94%（≈2.0s），末尾再淡回箭头。
   两头只带一点点位移（**不缩放**：第 622 轮需求「@span 鼠标悬停不要变小」——
   缩小那档会被当成悬停效果，撤掉）。

   ⚠️ keyframes 写在**媒体查询外面**（这个文件主体整个包在 ≤900px 里）：
   动画是靠 `html[data-mobile-home-chat-shell]` 那套选择器触发的，
   万一窗口宽度和这个属性短暂不同步，keyframes 不能跟着媒体查询一起失效。

   规则本体（以及「解析」态强制箭头常显）在文件中间那一段，搜索
   `generate-btn-arrow-cycle` 就能找到。 */
@keyframes generate-btn-arrow-cycle {
    0%,
    46% {
        opacity: 1;
        transform: translateY(0);
    }
    55%,
    92% {
        opacity: 0;
        transform: translateY(-3px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes generate-btn-price-cycle {
    0%,
    46% {
        opacity: 0;
        transform: translateY(3px);
    }
    55%,
    92% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(3px);
    }
}

/* 第 622 轮需求：「@span(.generate-btn-icon) 鼠标悬停不要变小」——
   发送键自己那两档按压缩放（`:active` 的 scale(0.96) / scale(0.98)，见 10-composer-send.css）
   在手机上不再生效：悬停 / 按下 / 聚焦都保持原尺寸，反馈只走底色与前面那支循环动画。
   桌面端保留那两档按压手感。 */
html[data-mobile-home-chat-shell] #generate-btn:hover:not(:disabled),
html[data-mobile-home-chat-shell] #generate-btn:focus-visible:not(:disabled),
html[data-mobile-home-chat-shell] #generate-btn:active:not(:disabled),
html[data-mobile-home-chat-shell] .wf-composer-send-wrap #wf-composer-send:active:not(:disabled) {
    transform: none;
}

/* 系统开了「减少动态效果」：不切换 —— 固定显示箭头（发送键该有的样子），积分由按钮的
   aria-label 与桌面端价签承担。 */
@media (prefers-reduced-motion: reduce) {
    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .generate-btn-wrap.has-price #generate-btn .generate-btn-icon svg {
        animation: none;
        opacity: 1;
    }

    html[data-mobile-home-chat-shell] :is(#panel-home .prompt-box, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host > .prompt-box) .generate-btn-arc {
        animation: none;
        opacity: 0;
    }
}

/* 第 661 轮（需求，移动端）：「@button#composer-batch-view-trigger 的下拉界面要在下拉按钮的正下方」——
   基线那条是 `top: calc(100% + 8px); right: 0`：面板比按钮宽（min-width 132 vs 70），
   右缘对齐时整块往左飘。
   第 662 轮（需求，移动端）：「要垂直居中于下拉按钮」—— 改成**居中于按钮那条垂直中线**
   （面板中线 = 按钮中线，还是挂在按钮下方 8px 处）。面板 165 宽、按钮坐在头部行中间，
   居中之后两侧都还在卡片里。只改手机端：桌面那颗按钮贴着头部行尾（第 597 轮 `margin-left: auto`），
   居中会顶出卡片右缘被裁掉。 */
html[data-mobile-home-chat-shell] .composer-batch-view-panel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* 第 661 轮（需求，移动端）：「@span 分组界面的高度高一些」——
   点分组框弹出的那张「分组 N」预览浮层（`.composer-batch-overlay > .composer-batch-card`）：
   基线是「居中弹窗 + 内容自适应」（`max-height: min(72vh, 640px)`），图少时卡片只有一百多高。
   手机端改成按可用高度撑开。
   第 662 轮（需求，移动端）：「分组界面的高度小一些不然上方的分组名称看不全」——
   661 那版吃满到浮层上内衬（24px）后，卡片上沿顶到 y=24，而那颗「分组 N」名字浮在卡片
   上沿外 8px、本身 30 高（实机量到名字 `[110,-14,171,30]`，上半截已经出了屏幕）。
   所以上边多让一档：浮层 padding-top 54（名字 30 + 间距 8 + 16 呼吸），
   卡片高 = 100dvh − 54 − 24 ⇒ 名字完整露在 y 16~46。
   图多时照旧在卡片内部滚；桌面那套「贴对话顶栏 / 分组那排」的定位（is-anchored）不受影响。 */
html[data-mobile-home-chat-shell] .composer-batch-overlay {
    padding-top: 54px;
}

html[data-mobile-home-chat-shell] .composer-batch-card {
    height: calc(100dvh - 78px);
    max-height: calc(100dvh - 78px);
}

/* 第 662 轮（需求，移动端）：「@div#composer-batch-body 列表里面有文件选中情况下，
   @button#composer-batch-delete 只显示图标、@span#composer-batch-count 隐藏、
   @button#composer-batch-add 隐藏」——
   选中后头部那行只留「全选（已选 n）/ 视图 / 删除（只剩图标）/ ✕」：
   「已选几个」本来就写在「全选」那颗的字里（第 589 轮起），计数胶囊这时是重复信息；
   删除收成 30 圆，跟同排那颗「✕」同款尺寸。`has-selection` 由 06n 在渲染时挂（选中数 > 0）。
   桌面端不做这件事 —— 那边一行放得下，删除照旧带文字。 */
html[data-mobile-home-chat-shell] .composer-batch-card.has-selection #composer-batch-count,
html[data-mobile-home-chat-shell] .composer-batch-card.has-selection #composer-batch-add {
    display: none;
}

html[data-mobile-home-chat-shell] .composer-batch-card.has-selection #composer-batch-delete .composer-batch-delete-label {
    display: none;
}

html[data-mobile-home-chat-shell] .composer-batch-card.has-selection #composer-batch-delete {
    width: 30px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

/* 第 663 轮（需求，移动端）：「@div#composer-batch-body 分组里面没有文件情况下，
   @button#composer-batch-add 隐藏」——
   空分组里那两颗「从资产库添加 / 从本地添加」已经把两份入口摆出来了，头部那颗「+」是重复的。
   `is-empty` 由 06n 在渲染时挂（分组里文件数 = 0）。桌面端不吃。 */
html[data-mobile-home-chat-shell] .composer-batch-card.is-empty #composer-batch-add {
    display: none;
}

/* 第 663 轮（需求，移动端）：「@button#composer-batch-view-trigger 位置始终要居中」——
   这颗原来是 `margin-left: auto` 顶到右边（第 597 轮）：头部那行的左右件会随
   「有没有文件 / 有没有选中」增减，它跟着一起漂。手机端改成相对整行绝对居中，
   两边件怎么增减都不动它（第 662 轮那颗「视图」下拉面板仍以它为基准居中）。 */
html[data-mobile-home-chat-shell] .composer-batch-head {
    position: relative;
}

html[data-mobile-home-chat-shell] .composer-batch-view {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
}

/* 第 663 轮：「视图」那颗脱离文档流之后，右边那组动作键（标记 / + / ✕）得自己顶到行尾 ——
   原来是靠「视图」的 `margin-left: auto` 把它们挤过去的（第 597 轮），
   现在它绝对居中了，那一组会缩到「全选」右边、被居中的「视图」压住（实机踩过）。 */
html[data-mobile-home-chat-shell] .composer-batch-head-actions {
    margin-left: auto;
}


/* ========== 第 1483 轮（移动端三条需求） ========== */

/* ① 「@label（.quick-prompts-panel-switch）不显示固定不能打开」——
   手机端预设面板顶上那颗「显示预设栏」开关直接收掉，预设栏的显隐在手机上固定下来，
   不再从这颗开关开 / 关（电脑端那套不动）。 */
html[data-mobile-home-chat-shell] .quick-prompts-panel-switch {
    display: none !important;
}

/* ③ 第 1844 轮（需求）：「@div#quick-prompts-panel 宽度要和创作栏宽度一致」——
   预设面板原来写死 360px（只受 max-width: 100vw - 24px 约束），手机端创作栏是
   「左右各让 --mobile-home-prompt-box-inset（10px）」的居中盒，两边差 10px，看着不齐。
   这里让面板吃同一条 inset：宽度 = 视口 − 两侧 inset（与 .prompt-box 同一算式），
   面板本身是 position: fixed，百分比按视口算；横向位置由 JS 居中，
   宽度一改就正好落在 10..(vw−10)，与创作栏左右边缘齐平。 */
html[data-mobile-home-chat-shell] .quick-prompts-panel {
    width: calc(100% - var(--mobile-home-prompt-box-inset, 10px) * 2);
    max-width: calc(100% - var(--mobile-home-prompt-box-inset, 10px) * 2);
}

/* ② 「创作栏固定显示阴影」——
   移动端创作栏原来进了「放大编辑」（.is-prompt-expanded）就把 box-shadow 收成 none
   （那是电脑端那两档留下的口径），浅色主题下还有一条 `box-shadow: none`，
   于是创作栏一放大就没有抬起感、平贴在页面上。这里把两档（常态 / 放大）/ 悬停 /
   聚焦全部钉成同一个阴影，并且用 !important 压过上面那些。
   ⚠️ 第 1503 轮（需求）：「@div（创作栏）不显示阴影」—— 本条已被反转：
   四档现在钉的是 `none`，创作栏跟下拉界面一样只剩玻璃面，不再抬起。 */
html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box,
html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded,
html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box:hover,
html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box:focus-within,
html[data-theme="light"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box {
    --hero-prompt-box-shadow: none;
    box-shadow: none !important;
}

html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box,
html[data-theme="dark"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded {
    --hero-prompt-box-shadow: none;
    box-shadow: none !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box,
    html[data-theme="system"][data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box.is-prompt-expanded {
        --hero-prompt-box-shadow: none;
        box-shadow: none !important;
    }
}

/* ========== 第 1484 轮（移动端：套图预览卡） ========== */

/* ① 「@button（批量引用 / 批量下载）不显示文字」——
   手机端那排工具键只留图标（圆形成 28×28 的方键），文字那层直接收掉。 */
html[data-mobile-home-chat-shell] .hero-results-image-toolbar-btn .hero-results-image-toolbar-text {
    display: none;
}

html[data-mobile-home-chat-shell] .hero-results-image-toolbar-btn {
    width: 28px;
    padding: 0;
    justify-content: center;
}

/* ② 「@span（.gen-preview-count「共 5 张」）不显示」 */
html[data-mobile-home-chat-shell] .gen-preview-count {
    display: none;
}

/* ③ 「@div（.gen-preview-table-wrap）表格一行最高 70px 然后可以左右滑动显示更多」——
   原来表格是 `width: 100% + table-layout: fixed`，手机上提示词那列被压到 54px，
   自动撑高的 textarea 于是算出 1600px 的行高（整张表 8171px）。现在：
     · 表格给一个够用的最小宽度 → 各列恢复可用宽度；
     · 外层横向滚动看更多列（不是把内容压扁）；
     · 每行高度钉在 70px（单元格 8px 内衬 ×2 + 54px 输入框），超出的文字在格子里自己滚。 */
html[data-mobile-home-chat-shell] .gen-preview-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

html[data-mobile-home-chat-shell] .gen-preview-table {
    width: max(100%, 720px);
    min-width: 720px;
}

/* 第 1493 轮（需求）：「@textarea 还没生成图片的情况下高度要自适应」——
   70px 一行只留给「已经出图」的行（`:has(.gen-preview-status-media)`，那格没有缩略图就是还没出图）。
   还没出图的行退回自动高度，见文件末尾第 1493 轮那段。 */
html[data-mobile-home-chat-shell] .gen-preview-table tbody tr:has(.gen-preview-status-media) {
    height: 70px;
}

html[data-mobile-home-chat-shell] .gen-preview-table tbody tr:has(.gen-preview-status-media) td {
    height: 70px;
    max-height: 70px;
    overflow: hidden;
}

html[data-mobile-home-chat-shell] .gen-preview-table tbody tr:has(.gen-preview-status-media) .gen-preview-prompt {
    /* 内联 style 里是 JS 按内容算出来的高度（手机上会算成 1600px），这里必须带 !important 压掉。
       53px + 上下 8px 内衬 + 行间 1px 边框 = 正好 70px 一行。 */
    height: 53px !important;
    max-height: 53px !important;
    min-height: 53px !important;
    overflow-y: auto !important;
}

html[data-mobile-home-chat-shell] .gen-preview-cell--status {
    overflow: hidden;
}

/* 生成结果那一格原来竖着排「状态 + 生成键 + 缩略图」，缩略图撑到 247px —— 一行 70px 装不下。
   手机上把缩略图收掉（宫格排序那档照样能看大图），只留状态与那颗生成键。
   第 1484 轮（需求）：「表格一行最高 70px 然后可以左右滑动显示更多」 */
html[data-mobile-home-chat-shell] .gen-preview-status-stack {
    max-height: 54px;
    overflow: hidden;
}

html[data-mobile-home-chat-shell] .gen-preview-cell--status .gen-preview-status-media {
    display: none;
}

/* ========== 第 1485 / 1486 轮（移动端：生成设置弹层的布局整理） ==========
   第 1485 轮量到的问题（338×844）：
     · 面板被一层层内衬/边框吃掉宽度（body `max-width: calc(100% - 24px)`），
       内容只剩 284px，平台 / 语言的胶囊只有 104px，值只能显示成「淘宝/…」；
     · 「平台」「语言」两行是竖排（标签一行、胶囊一行），每行 71px 高；
     · 画质 / 比例 / 输出 三个横排却挤成 149px 宽各自换行，整块 123px 高。
   第 1486 轮（用户原话）：
     · 「#mobile-prompt-sheet-card 背景色统一为白色」—— 面板里那层 `.chip-dropdown-menu`
       吃的是玻璃表面色（浅色 #f5f5f5），于是卡片白、内容灰，看着像两块；
     · 「#gen-settings-dropdown-panel 里面的下拉样式要和电脑端的一致」—— 第 1485 轮
       把下拉改成了「标签在上、值在下 + 灰底无边框」，电脑端是「标签 │ 值 ⌄」一行、
       透明底、33px 胶囊，这里整段退回电脑端那份，只保留换行；
     · 「删除 button.gen-settings-image-set-open-drawer」—— 模块套图里套图设置已经平铺在下面，
       那颗「套图设置」胶囊纯属多余（JS 早就给它加了 `hidden`，是 CSS 的 `display: block`
       把它顶回来了，所以一直还在）。 */

/* ① 内容吃满宽度：去掉 body 的 24px 内缩与面板的多余内衬 / 边框 */
html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body {
    max-width: 100% !important;
    /* 上面那 56px 是卡片的拖拽区（.mobile-sheet-dismiss-zone，58→114）：内容从它下面开始，
       否则档位那排整条都在拖拽区底下，点不动（实机量到档位条 79→117，全被盖住）。 */
    padding: 56px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    /* 弹层里那层菜单 / 面板 / 抽屉全部用「弹层表面色」（浅色即纯白），
       不再让玻璃表面色透进来。深色主题下这个 token 是 #121212，跟着一起走。 */
    background: var(--mobile-sheet-surface-bg, #ffffff) !important;
}

/* ⚠️ 特异性得跟「玻璃表面」那条对齐：那两条的 `:is(...)` 里带着 `#user-menu` 这类 id，
   算下来是 3 个 id + 2 个元素（`html body :is(#user-menu,…):not(#glass-a):not(#glass-b)`），
   实测只写三个 id（3-1-0）都会被它按元素数压过去。
   这里照它的形状写（`:is()` 里塞满 id、外面挂两个 :not(#glass-…)），拿到 4 个 id 才真的赢。 */
/* 第 1847 轮（需求）：「@button#mobile-mode-model-combo-trigger @button#gen-settings-dropdown-trigger
   的界面背景色改成白色」—— 弹层卡片回到不透明的弹层表面色（浅色纯白 / 深色 #121212），
   无磨砂、无投影。⚠️ 这条要压过 48-glass-surfaces 那条玻璃面（它带 3 个 id），
   所以照老办法用 `html body :is(…):not(#glass-a):not(#glass-b)` 把权重顶上去。 */
html[data-mobile-prompt-sheet-open="mode-model"] body :is(#mobile-prompt-sheet-root #mobile-prompt-sheet-card):not(#glass-a):not(#glass-b),
html[data-mobile-prompt-sheet-open="gen-settings"] body :is(#mobile-prompt-sheet-root #mobile-prompt-sheet-card):not(#glass-a):not(#glass-b) {
    background: var(--mobile-sheet-surface-bg, #ffffff) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
}

/* 里层菜单 / 面板 / 抽屉：同样是弹层表面色（白），跟着卡片走 */
html body :is(#mobile-prompt-sheet-root #mobile-prompt-sheet-card #mobile-prompt-sheet-body .chip-dropdown-menu, #mobile-prompt-sheet-root #mobile-prompt-sheet-card #mobile-prompt-sheet-body .chip-dropdown-panel, #mobile-prompt-sheet-root #mobile-prompt-sheet-card #mobile-prompt-sheet-body .gen-drawer):not(#glass-a):not(#glass-b) {
    background: var(--mobile-sheet-surface-bg, #ffffff) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
}

html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body > .chip-dropdown-menu,
html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .chip-dropdown-panel-gen-settings,
html[data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .gen-settings-sections {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ② 档位那排：三段等宽铺满，不要灰底 */
html[data-mobile-prompt-sheet-open="gen-settings"] .gen-settings-mode-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

html[data-mobile-prompt-sheet-open="gen-settings"] .gen-settings-mode-bar-tabs {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 4px;
}

html[data-mobile-prompt-sheet-open="gen-settings"] .gen-settings-mode-bar-tabs .gen-settings-image-set-mode-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 32px;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 「套图设置」那颗胶囊：第 1491 轮用户再提「@button 删除」——手机上三档都不再显示
   （模块套图里套图设置已经平铺在下面；电商套图那档的内容本来也不靠它切换）。
   ⚠️ 原来 JS 给了 `hidden`，是 CSS 的 `display: block` 把它顶回来的，这里用 !important 兜住。 */
html[data-mobile-prompt-sheet-open="gen-settings"] .gen-settings-mode-bar > .gen-settings-image-set-open-drawer,
html[data-mobile-prompt-sheet-open="gen-settings"] .gen-settings-mode-bar > .gen-settings-image-set-open-drawer[hidden] {
    display: none !important;
}

/* ⚠️ 每条都带 `#mobile-prompt-sheet-root`：上面第 5xxx 行那批「手机端竖排」的规则是
   `.mobile-prompt-sheet-root .mobile-prompt-sheet-body …`（0-4-0），
   只写 `html[data-…] .xxx`（0-2-1）压不住 —— 实机量到 meta 还是 `column` + `gap: 12px`。 */
/* ③ 平台 / 语言 / 画质 / 比例 / 输出：第 1487 轮（用户原话）
   「一行显示 2 个要占满宽度并且标签文字都要有分割线然后标签要垂直对齐」——
   改成 2 列网格、每格「标签 │ 值」都铺满，5 颗自然排成 2 / 2 / 1 三行。
   标签垂直对齐靠的是统一几何：两边标签都从格子左缘 0 起、字体 12px、宽 24，
   竖线 1px 两边各留 6px，于是第二列的值都从同一条竖线上起。
   `--media` 那三个仍是「标签在胶囊里」，胶囊左内衬归零后起点与旁边那格完全一致。 */
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 4px 10px;
    width: 100%;
}

html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta > .gen-settings-extra-row--media {
    display: contents;
}

/* 平台 / 语言这格：标签 │ 胶囊，胶囊吃满剩余宽度 */
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta > .gen-settings-extra-language {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    width: 100% !important;
    max-width: none;
    min-height: 33px;
    padding: 0;
    gap: 0;
}

/* 标签文字都要有分割线 —— 这根竖线默认是 `display: none`（原来只给抽屉里用） */
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta > .gen-settings-extra-language > .gen-settings-section-divider {
    display: block;
    flex: 0 0 auto;
    width: 1px;
    height: 13px;
    margin: 0 6px;
    background: var(--border-mid, rgba(0, 0, 0, 0.14));
}

/* 两边的标签用同一套字号 / 宽度，竖线才对得上 */
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta > .gen-settings-extra-language > .gen-settings-select-label,
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--media .gen-settings-select-label {
    flex: 0 0 auto;
    min-width: 24px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta .gen-settings-select-divider,
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--media .gen-settings-select-divider {
    flex: 0 0 auto;
    width: 1px;
    height: 13px;
    margin: 0 6px;
    background: var(--border-mid, rgba(0, 0, 0, 0.14));
}

/* 胶囊铺满格子；值区跟着撑开（原来写死 84 / 52px 是为了挤一行，现在不需要了） */
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta .gen-settings-select-option-wrap,
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--media .gen-settings-select-option-wrap {
    flex: 1 1 auto;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    height: var(--gen-settings-control-h, 33px);
    /* 左边不留内衬：标签从格子左缘起，才能和旁边那格对齐 */
    padding: 0 10px 0 0;
    border: none !important;
    border-radius: 999px;
    /* 底色交给第 1489 轮那条（平台 / 语言挂在格子上、画质那三个挂在胶囊上），这里不写，
       否则会把它压回去（实机第一版量到三颗胶囊还是 transparent）。 */
    gap: 0;
}

html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta .gen-settings-select-value-row,
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--media .gen-settings-select-value-row {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}

html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta .gen-settings-select-input,
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--media .gen-settings-select-input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    /* 12–14px 都能放得下「淘宝/天猫」，13px 兼顾好认；
       16px 是「防 iOS 聚焦缩放」那条 !important 顶上去的，这里要压回来 */
    font-size: 13px !important;
    text-overflow: ellipsis;
}

/* 那颗键搬走以后，面板顶上就只剩一个 spacer —— 这一整行（含 12px 外边距）别留着空占位 */
html[data-mobile-prompt-sheet-open="gen-settings"] .gen-settings-fixed-head:not(:has([data-ai-create-fixed-add])) {
    display: none !important;
}

/* ④ 弹层右上角：把「添加固定参数」那颗键放到关闭键左边（JS 会把它搬进卡片，
   见 syncMobileSheetFixedAddButton）。尺寸/底色对齐那颗 24×24 的关闭键。 */
.mobile-prompt-sheet-card > .ai-create-director-voice-tools.is-mobile-sheet-fixed-add {
    position: absolute;
    top: 8px;
    right: 42px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
}

.mobile-prompt-sheet-card > .ai-create-director-voice-tools.is-mobile-sheet-fixed-add .ai-create-director-voice-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bg-elev-2, #ebebef);
    color: var(--text-secondary);
}

.mobile-prompt-sheet-card > .ai-create-director-voice-tools.is-mobile-sheet-fixed-add .ai-create-director-voice-tool svg {
    width: 14px;
    height: 14px;
}

/* 第 1485 轮：内联到「生成设置」弹层里的套图设置抽屉 ——
   它原来靠绝对定位挂在创作栏上沿外面，搬进弹层后必须退回普通文档流，
   否则内容会被画到弹层外面（实机：模块网格浮在弹层上方）。 */
html[data-mobile-prompt-sheet-open="gen-settings"] .gen-drawer.is-mobile-inline-drawer {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    /* 不参与 flex 分配：内联时整张弹层是「一整条长滚动」（见下面那段），
       抽屉按内容自然高，不再和上面的参数表抢高度。 */
    display: block;
    flex: 0 0 auto;
    overflow: visible !important;
}

html[data-mobile-prompt-sheet-open="gen-settings"] .gen-drawer.is-mobile-inline-drawer > .gen-drawer-head {
    display: none !important;
}

html[data-mobile-prompt-sheet-open="gen-settings"] .gen-drawer.is-mobile-inline-drawer .gen-drawer-body {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* 内联态：参数表 + 模块网格合成一条长滚动（滚的是 .mobile-prompt-sheet-body）。
   不这么改的话，下面这块网格拿走 flex 剩余高度后，上面的「平台 / 语言」只剩百来像素，
   实机看上去是两行被切成了一半。 */
html[data-mobile-gen-drawer-inline="1"][data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: block !important;
}

html[data-mobile-gen-drawer-inline="1"][data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .chip-dropdown-menu.is-mobile-prompt-bottom-sheet-content,
html[data-mobile-gen-drawer-inline="1"][data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .chip-dropdown-panel-gen-settings,
html[data-mobile-gen-drawer-inline="1"][data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .gen-settings-sections {
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* ========== 第 1488 轮（移动端：资产库三处） ==========
   用户原话：
     ·「资产库界面的关闭按钮要垂直居中于 #asset-library-modal-sidebar-title」
     ·「#materials-record-mic / #materials-upload-btn 背景色改成黑色图标白色」
     ·「#materials-new-folder 不显示边框」
   实机（390×844，资产库已打开）量到：
     · 标题 top 43 / 高 32 → 中心 59；关闭键 top 43 / 高 24 → 中心 55，低 4px；
     · 录音键与上传键是白底（--modal-card-bg）+ 墨色图标；
     · 「更多」那颗在 631 轮被加了 1px --border-soft 描边。 */

/* ① 关闭键跟标题中线对齐：标题中心 59、关闭键 24 高 ⇒ top 12（原来 8，中心 55） */
#asset-library-modal .asset-library-modal-card > .mobile-sheet-close {
    top: 12px;
}

/* ③ 「更多」那颗不要边框（631 轮加的那圈 --border-soft 撤掉，浅灰底留着当可点区域） */
#asset-library-modal #materials-new-folder {
    border: none;
}

/* ========== 第 1489 轮（移动端两处） ==========
   用户原话：
     ·「@div（.cloud-storage-folder）的底边要贴合 @div#cloud-storage-folders 的底边」
       —— 实机（390×844）：灰底的底边 264.3、文件夹格子底边 258.3，差的那 6px 就是
          灰底自己的 `padding-bottom: 8px`（内容 108.3 + 上内衬 4 + 下内衬 8 = 120.3）。
     ·「@div（.gen-settings-extra-language）显示背景色」—— 第 1486 轮为了「和电脑端一致」
       把这几格改成了透明底，手机上没有输入框的边界感；给每格铺一层 --bg-elev-1 圆角底。
       ⚠️ 平台 / 语言那格与画质那三个胶囊都铺（同一排长得一样），左内衬也统一成 10px，
          标签才继续对齐。 */

/* ① 文件夹格子底边与灰底底边齐平：下内衬归零（上内衬 4px 留着，顶部不贴边） */
#asset-library-modal .asset-library-modal-body > .cloud-storage-folders {
    padding-bottom: 0;
}

/* ② 生成设置那排下拉：每格铺一层浅灰底（输入框终于有边界感），标签和值的内衬统一 10px */
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta > .gen-settings-extra-language,
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--media .gen-settings-select-option-wrap {
    height: var(--gen-settings-control-h, 36px);
    padding: 0 10px;
    border-radius: 10px;
    background: var(--bg-elev-1, rgba(0, 0, 0, 0.04));
}

/* 悬停 / 聚焦时深一档，别跟底下的输入框叠成两层灰 */
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta > .gen-settings-extra-language:focus-within,
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--media .gen-settings-select-option-wrap:focus-within {
    background: var(--bg-elev-2, rgba(0, 0, 0, 0.07));
}

/* 底已经由格子给了，里面那颗输入框自己别再铺一层 */
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta .gen-settings-select-input,
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--media .gen-settings-select-input {
    background: transparent !important;
}

/* ========== 第 1490 轮（移动端三处） ==========
   用户原话：
     ·「@div#cloud-storage-folders 不显示背景色」—— 626 轮给这排文件夹铺过
       `--bg-elev-2` 的灰底（那时它的子格还是透明的，需要一块托底）；
       现在格子自己带预览层，这层灰底只剩「一圈多余的面」，撤掉。
     ·「@svg（.asset-library-category-caret）距离 @span#asset-library-category-title-text 10px」
       —— 实机（390×844）：文字右缘 220、箭头左缘 219，正好贴着。
     ·「@div（.gen-settings-extra-row--meta）下移 10px」 */

/* ① 文件夹那排不要底色（圆角留着无害，格子自己带预览层） */
#asset-library-modal .asset-library-modal-body > .cloud-storage-folders {
    background: transparent;
}

/* ② 分类标题与展开箭头之间留 10px（整组仍然居中） */
html[data-mobile-home-chat-shell] #asset-library-modal .asset-library-modal-card > .mobile-sheet-dismiss-zone > .asset-library-modal-sidebar-title {
    gap: 10px;
}

/* ③ 参数那排（平台 / 语言 / 画质 / 比例 / 输出）下移一档 —— 第 1491 轮改成「两种档位一致」：
   这段由容器 gap（12）+ 档位条自己的 margin-bottom（6）给到，自己不再额外加 margin。 */
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta {
    margin-top: 0;
}

/* ========== 第 1491 轮（移动端：档位条 → 参数那排的间距两种档位一致） ==========
   用户原话：「@div（参数那排）到 @div（档位那条）的距离要和 @div（参数那排）到
   @div（档位那条）的距离一致，@button（套图设置）删除」。
   实机（390×844）两种档位差 18px：
     · 电商套图（面板是 flex 列、gap 12）：档位条 margin-bottom 6 + 容器 gap 12 + 自己 margin 10 = 28；
     · 模块套图（内联长滚动，面板被我改成 display: block）：6 与 10 相邻边距叠加取大 = 10。
   统一成「电商套图」那一档的 18px：内联态也让容器走 flex 列（gap 生效），
   参数那排自己的 margin-top 归零（见上面第 1490 轮那段）。 */
html[data-mobile-gen-drawer-inline="1"][data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .gen-settings-sections {
    display: flex !important;
    flex-direction: column;
}

/* 内联态里那几块都别再抢高度（长滚动的仍是 .mobile-prompt-sheet-body） */
html[data-mobile-gen-drawer-inline="1"][data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body .gen-settings-sections > * {
    flex: 0 0 auto;
    min-height: 0;
}

/* ========== 第 1492 轮（移动端：生成设置三处） ==========
   用户原话：
     ·「@input（平台）@input（语言）的宽度要和 @input（画质）的宽度一致」
       —— 实机（390×844）量到：平台 / 语言那两颗 89px、画质 / 比例 / 输出那三颗 99px。
          差的 10px 是「平台 / 语言」那格里面那颗胶囊还留着的右内衬（第 1487 轮写的
          `padding: 0 10px 0 0`）—— 标签在格子外层，这 10px 纯粹把值区挤窄了。
     ·「@div（.gen-settings-image-set-head）上方添加分割线」—— 它在抽屉里有
          `border-top: 1px dashed`，但 `#gen-drawer-content` 那条把线抹成了 `border-top: 0`；
          手机端抽屉是平铺在弹层里的，这条线该留着。
     ·「@button（.gen-settings-image-set-add 添加自定义模块）点击后界面被遮挡」——
          点它会弹 `#image-set-module-modal`（z-index 5300），而手机弹层根是 10200，
          整张弹窗被压在弹层底下（实机量到 root 10200 > modal 5300）。 */

/* ① 五颗输入框一样宽：把「平台 / 语言」那颗胶囊的右内衬去掉，值区就有 99px。
   ⚠️ 只能写到 `> .gen-settings-extra-language` 这一层：`--media` 是它的子节点，
      写成 `.gen-settings-extra-row--meta …option-wrap` 会把画质那三颗也一起改掉
      （实机第一版：平台 / 语言 99，画质那三颗 109，反而更不齐）。 */
html[data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .gen-settings-extra-row--meta > .gen-settings-extra-language .gen-settings-select-option-wrap {
    padding-right: 0;
}

/* ② 模块网格上方那条虚线分割线 */
/* ⚠️ 要带 `#gen-settings-drawer`：抹掉这条线的 `#gen-drawer-content .gen-settings-image-set-head`
   是 (1,1,0)，只写两个属性选择器 + 类（0,3,1）压不住（实机量到 border-top 还是 0）。 */
html[data-mobile-gen-drawer-inline="1"][data-mobile-prompt-sheet-open="gen-settings"] #gen-settings-drawer .gen-settings-image-set-head {
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px dashed var(--border-mid, rgba(0, 0, 0, 0.14));
}

/* ③ 「添加自定义模块 / 编辑模块」那颗弹窗要压在手机弹层上面（原来 5300 < 10200） */
#image-set-module-modal.modal.show {
    z-index: 10400;
}

/* ========== 第 1493 轮（移动端：还没出图的提示词框按内容撑高） ==========
   第 1484 轮为了让一行只有 70px，把提示词框钉成 53px + 自己滚、单元格 `overflow: hidden`。
   用户第 1493 轮（原话）：「@textarea 还没生成图片的情况下高度要自适应」——
   那一行还没出图时，提示词要能整段看到（现在只露两行，改词得在 53px 的框里滚）。
   所以 1484 那几条改成只作用于「已经有缩略图」的行，没出图的行退回自动高度：
     · 行 / 单元格都放开高度限制；
     · 提示词框只留一个下限，高度交给 `autosizeGenPreviewPrompt()` 写的内联 style
       —— 这里**一个字都不能写 `height`**，写了（哪怕 `auto !important`）内联那份就永远被压住，
       `height: auto` 在 textarea 上还原成 rows="2" 的默认两行高，比原来还矮。 */
html[data-mobile-home-chat-shell] .gen-preview-table tbody tr:not(:has(.gen-preview-status-media)) {
    height: auto;
}

html[data-mobile-home-chat-shell] .gen-preview-table tbody tr:not(:has(.gen-preview-status-media)) td {
    height: auto;
    max-height: none;
    overflow: visible;
}

html[data-mobile-home-chat-shell] .gen-preview-table tbody tr:not(:has(.gen-preview-status-media)) .gen-preview-prompt {
    /* autosize 至少给 44px，这里抬到 53px 跟出图那行等高 */
    min-height: 53px !important;
    max-height: none !important;
    overflow-y: hidden !important;
    resize: none;
}

/* ========== 第 1494 轮（移动端：放大编辑的恢复键 / 放大后收起胶囊 / 表格那几格居中） ==========
   用户原话（同一轮三条）：
     · 「@button#home-prompt-resize-handle 点击放大之后怎么没有显示恢复/缩小按钮」
     · 「另外放大之后不要显示 @button#mobile-mode-model-combo-trigger @button#gen-settings-dropdown-trigger」
     · 「@td @td @span 要居中显示」

   ① 放大态（`.is-prompt-input-hero-maximized`）那颗手柄留着当「恢复」用 ——
      658 轮那条「放大后不显示」已经拆掉（见文件上半段那段注释），这里只补图标切换：
      常态是朝外的双直角括号，放大后换成朝内那对。点击本来就是 toggle
      （`openDesktopPromptExpandEditor()` 里判到已放大就 `closeDesktopPromptExpandEditor()`），
      title / aria-label 也早就是「点击恢复原来大小」（`syncHomePromptResizeHandleHint`）。
      ⚠️ 图标切换只在手机端壳里做，电脑端那颗维持原样。 */
html[data-mobile-home-chat-shell] .prompt-box-resize-handle .prompt-resize-icon--collapse {
    display: none;
}

html[data-mobile-home-chat-shell] .prompt-box-resize-handle.is-maximized .prompt-resize-icon--collapse {
    display: inline;
}

html[data-mobile-home-chat-shell] .prompt-box-resize-handle.is-maximized .prompt-resize-icon--expand {
    display: none;
}

/* 放大态那颗手柄给一点点底色，不然单独一个 22px 的灰图标看着不像按钮
   （常态那颗是半透明的，`.is-maximized` 又把底色清成了 transparent）。 */
html[data-mobile-home-chat-shell] .prompt-box.is-prompt-input-hero-maximized > .prompt-box-resize-handle.is-maximized {
    background: var(--bg-elev-1, rgba(0, 0, 0, 0.04));
}

/* ② 放大后顶栏那两颗胶囊（类型·模型 / 模块套图参数）压在标题上，收掉。
   放大态整块就是编辑器，改设置得先收回去 —— 留着只会糊在标题那一行上。 */
html[data-mobile-home-chat-shell] #panel-home .prompt-box.is-prompt-input-hero-maximized :is(#mobile-mode-model-combo-trigger, #gen-settings-dropdown-trigger),
html[data-mobile-home-chat-shell] #wf-chat-panel-home-host > .prompt-box.is-prompt-input-hero-maximized :is(#mobile-mode-model-combo-trigger, #gen-settings-dropdown-trigger) {
    display: none !important;
}

/* ③ 没出图的行现在是自动高度（第 1493 轮），序号 / 用途 / 生成结果这三格原来贴着顶边，
   在几百像素高的行里内容全挤在上头。这里让它们居中（提示词那格仍贴顶，多行文字从第一行读起）。 */
html[data-mobile-home-chat-shell] .gen-preview-table tbody tr:not(:has(.gen-preview-status-media)) :is(td.gen-preview-cell--index, td.gen-preview-cell--use, td.gen-preview-cell--status) {
    vertical-align: middle;
}

/* ========== 第 1495 / 1496 轮（移动端：放大卡的头栏） ==========
   第 1495 轮（用户原话）：「@button（.gen-preview-max-btn）点击放大后 @div（.gen-preview-head）
   的顶边距离 @div（.logo-icon）的底边 20px」—— 当时是把卡的顶内衬让到 62（42 + 20），
   卡头整块跟着下移，还挂了一块白底伪元素盖住滚动中途露出来的那条缝。

   第 1496 轮（用户原话）：「@button 点击放大之后 @div（.logo.app-sidebar-logo）不显示，
   @div（.gen-preview-head）的顶边贴合 @div（.gen-preview-card）的顶边，@div 高度增加 20px」——
   既然侧栏那颗 logo 直接收掉，卡头就不用再让位了：顶内衬回到基础的 18px、
   `margin-top: -18px` 把顶边贴回卡片顶边（0），高度 24 → 44。
   上一轮那 62px 的让位和贴边遮罩一并撤掉（顶边已经是 0，没有缝要盖）。 */

/* ① 放大时侧栏那颗 logo 不显示（它正好压在卡头左边那截标题上）。
   ⚠️ 光藏 `.app-sidebar-logo` 不够：那圈白圆底 + 投影画在它的父级 `.app-sidebar-head` 上
   （32×32、圆角 999、`position: fixed`），而且侧栏那一层的层级压得住放大卡 ——
   只藏 logo 的话屏幕上还留着一个白圆点（实机截图里「模块套图」左边那圈）。
   这一档连头部一起收掉：进放大态时也用不上它（要开侧栏得先退出去）。 */
html[data-mobile-home-chat-shell] body.is-gen-preview-maximized :is(#app-sidebar-head, .app-sidebar-logo) {
    display: none;
}

/* ② 卡头顶边贴合卡片的顶边（卡片 `inset: 0`，顶边就是 0）。 */
html[data-mobile-home-chat-shell] .gen-preview-card.is-maximized {
    padding-top: 18px;
}

html[data-mobile-home-chat-shell] .gen-preview-card.is-maximized .gen-preview-head {
    margin-top: -18px;
    /* 原来这 18px 的上内衬换成下面那 20px 的高度，顶边才真的是 0 而不是「文字在 0」。
       第 1499 轮（需求）：「@div（.gen-preview-head）里面的控件要垂直居中于 @div」——
       下内衬还留着基础那条的 10px，内容区于是只剩 0..34，工具条被顶到 4..30（上 4 / 下 14）。
       上下一并归零，44px 全是内容区，`align-items: center` 才真的把控件居中（26 高 → 9..35）。 */
    padding-top: 0;
    padding-bottom: 0;
    /* 吸附位置和基础那条一致：滚起来贴住视口顶，内容从卡头下面过。 */
    top: -18px;
    /* 第 1496 轮：「@div 高度增加 20px」—— 实机原来 24px。 */
    height: 44px;
    min-height: 44px;
}

/* ③ 放大后一张图占满整行：图、格子、宫格、外层全都跟着 `.gen-preview-images` 的宽度走。
   实机原来整条链是 166px 宽（第 1458 轮「图片宽度为 .gen-preview-images 的一半宽度」那条
   `width/max-width: 50%` 在管着，卡片可用宽度是 331px）。
   ⚠️ 必须带 `#hero-results`：1458 那条是 `#hero-results .gen-preview-card[data-gen-preview-view="only"]
   .gen-preview-images > .hero-results-media-wrap`（1 个 id + 4 个类），只写类名压不住。
   半宽那套只在「没放大」的卡里保留，放大态才铺满。 */
html[data-mobile-home-chat-shell] #hero-results .gen-preview-card.is-maximized .gen-preview-images > .hero-results-media-wrap,
html[data-mobile-home-chat-shell] #hero-results .gen-preview-card.is-maximized .gen-preview-images > .hero-results-msg,
html[data-mobile-home-chat-shell] #hero-results .gen-preview-card.is-maximized .gen-preview-images .hero-results-media-preview,
html[data-mobile-home-chat-shell] #hero-results .gen-preview-card.is-maximized .gen-preview-images .hero-results-image-grid,
html[data-mobile-home-chat-shell] #hero-results .gen-preview-card.is-maximized .gen-preview-images .hero-results-image-cell,
html[data-mobile-home-chat-shell] #hero-results .gen-preview-card.is-maximized .gen-preview-images .hero-results-image-btn {
    width: 100%;
    max-width: 100%;
}

/* ========== 第 1497 轮（移动端：放大卡里「头栏 / 图片」都按卡片宽度对齐） ==========
   用户原话（按附件顺序）：
     · 「@div（.gen-preview-head）的宽度要和 @div（.gen-preview-card）的宽度一致」
     · 「@button（.hero-results-image-btn）的宽度也要和 @div（卡片）的宽度一致」
     · 「@span（.gen-preview-head-tools）的右边距离 @div（卡片）的右边
        要和 @strong（标题）的左边距离 @div（卡片的）左边的距离一致」

   实机（390×844，放大后）量到的：
     · 卡片 `offsetWidth` 390、`clientWidth` **375** —— 差的那 15px 是它自己那条滚动条；
       头栏跟着被压成 375，于是工具条右缘离卡片右边 **37**，标题左缘离左边只有 22；
     · 图片按钮 331，比卡片窄了「左内衬 22 + 右内衬 22 + 滚动条 15」。

   做法：
     ① 放大卡不画自己的滚动条（手机上本来就是手势滚）—— 头栏回到 0..390，
        它自己那 22 的左右内衬就对称了：标题左缘 22、工具条右缘离右边也是 22；
     ② 图片整条链破出卡片那 22px 内衬，铺满 390 的卡片宽度（左右各 -22 外边距）。
   ⚠️ 两条都只在手机端 + 放大态，电脑端那张放大卡一个字节没动。 */
html[data-mobile-home-chat-shell] .gen-preview-card.is-maximized {
    scrollbar-width: none;
}

html[data-mobile-home-chat-shell] .gen-preview-card.is-maximized::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

html[data-mobile-home-chat-shell] #hero-results .gen-preview-card.is-maximized .gen-preview-images {
    /* 卡片左右各 22 的内衬：破出去正好贴合卡片的左右边 */
    width: calc(100% + 44px);
    margin-inline: -22px;
}

/* ========== 第 1503 轮（移动端：创作栏外观对齐下拉界面） ========== */

/* 需求原话：「@div（div.prompt-box.is-prompt-expanded，创作栏）创作栏不显示阴影
   并且圆角再大一点，创作栏背景色和毛玻璃透明度和边框样式都要和
   @label#image-stack-upload-label 的下拉界面一致」。

   那颗「+」的下拉（.composer-batch-add-menu）走的是 48-glass-surfaces.css 那套全站玻璃面
   （本机 390×844 实测）：底色 --glass-surface-bg、一圈 --gen-drawer-border、
   磨砂 --glass-filter、无投影。创作栏原来自己另有一套：
     · 底色 --mobile-chat-glass-bg（页面底色 72%，比下拉那档实）
     · 描边被 2748 那条 `border: none !important` 摁死
     · 投影 0 6px 18px（第 1483 轮②要求的，本轮反转）
   这里把创作栏对齐下拉：底色 / 描边 / 磨砂全部读同一组 token（用户在全站弹层外观里
   改透明度，两处一起跟着变），投影撤掉。圆角本轮由 24px 加到 28px（见 2733 行那条 token）。

   ⚠️ 权重：本条要压过 `html[data-mobile-home-chat-shell] :is(…) > .prompt-box { border: none !important }`
      （1,3,2）和深色放大档那条（2,6,2），所以照 48-glass-surfaces 的老办法用两枚不存在的 id
      把权重顶到 (3,3,2)。
   ⚠️ 四个状态（无对话 / 有对话 × 常态 / 放大）一起套：只改放大档的话，
      点开 / 收起时创作栏会换一张脸。 */
html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host) > .prompt-box:not(#glass-a):not(#glass-b) {
    --hero-prompt-box-shadow: none;
    background: var(--glass-surface-bg, var(--mobile-chat-glass-bg)) !important;
    border: var(--gen-drawer-border-w, 1px) solid var(--gen-drawer-border, #fff) !important;
    box-shadow: none !important;
    backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
    -webkit-backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
}

/* ========== 第 1504 轮（移动端：没有「回到底部」圆钮时胶囊行放宽） ========== */

/* 需求原话：「@button#hero-chat-scroll-bottom 没有显示情况下 @div（.prompt-options）宽度大一些」。

   那排创作栏胶囊（第 654 轮被搬成 .prompt-box 的直接子节点）右缘一直固定让出 49px
   —— 28px 圆钮 + 8px 呼吸 + 13px 边距。可圆钮是 `hidden` 说了算（05-generation.js 的
   `heroChatScrollBottomBtn.hidden = !(isChat && hasChat && !isHeroChatNearBottom())`），
   不显示的时候右边就白空一格。实机（390×844，创作栏 318 宽）量的：
   胶囊行 24..278（right 49px 生效），圆钮 hidden 之后还是 24..278，一格没还回来。

   这里按圆钮的真实显隐算：圆钮存在、且挂在没被 hidden 的 .hero-results 里才让 49，
   否则退回与左边对称的 13 —— 胶囊行随之从 254 变成 290（宽 36）。

   ⚠️ 取值走变量（--mobile-chips-row-right）而不是直接写 right：3743 那条权重是 (2,6,2)，
      在这边再凑一条「圆钮不在」的 right 得靠假 id 才压得动；变量写在 .prompt-box 上，
      胶囊行读最近的声明，就不用跟它打权重官司。 */
html[data-mobile-home-chat-shell] :is(#panel-home .hero, html[data-wf-chat-home-mounted] #wf-chat-panel-home-host):not(:has(.hero-results:not([hidden]) .hero-chat-scroll-bottom:not([hidden]))) > .prompt-box {
    --mobile-chips-row-right: 13px;
}

/* ========== 第 1505 轮（移动端：宫格 3 列 + 预览缩略图条挪到图片下方） ========== */

/* ① 「@button（.hero-results-image-layout-btn，宫格排序）… 只显示 3 个」——
   聊天里那组宫格一直是 repeat(4, …)（10-chat-bubbles-media.css）：390 宽下对话列
   361，每格只剩 81.5px、缩略图小得看不出。手机端改成 3 列（每格 112px）。
   卡片里的那组（.gen-preview-card）跟同一套规则，一起变 —— 3 张图正好一行排满。
   ⚠️ 第 1506 轮补：必须排除竖排（.hero-results-image-grid--list）—— 竖排那边是
      「一列塞满」，本条权重（0,2,1）比它那条（0,2,0）高，不排除的话手机上点「垂直排序」
      还是 3 列（实机踩到）。 */
html[data-mobile-home-chat-shell] .hero-results-image-grid:not(.hero-results-image-grid--list) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ② 「@div#image-preview-thumbs 显示在 @img#image-preview-img 下方」——
   DOM 由 06-prompt-media.js 的 syncMobilePreviewThumbsBelow() 搬进
   #image-preview-main-col（图片下方、带 8px 间距），这里只管外形：
   整行铺满画布宽度、横向滚动看更多、按钮垂直居中。 */
html[data-mobile-home-chat-shell] #image-preview-main-col > #image-preview-thumbs-lead {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: 48px;
    min-height: 48px;
    justify-content: center;
    padding: 0 2px;
}

html[data-mobile-home-chat-shell] #image-preview-main-col > #image-preview-thumbs-lead .image-preview-thumbs {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    height: 48px;
}

/* ========== 第 1506 轮（移动端：排列两颗键改成滑动切换胶囊） ========== */

/* 需求原话：「@button（.hero-results-image-layout-btn）的图标要和 @button
   （.gen-preview-view-seg-btn.gen-preview-toggle-table，只看图片）的图标一致，
   @button 移到 @button 的左边，@button 和 @button 改成滑动切换样式参考 @span（.gen-preview-view-seg）」。

   三件事：
     ① 垂直排序那颗的图标换成「只看图片」同款（一张图一行，见 05-generation.js 的 svg）；
     ② 垂直排序挪到宫格排序左边（DOM 顺序也换了）；
     ③ 两颗收进一条胶囊 + 会滑的白滑块，外观照抄 .gen-preview-view-seg
        （26px 一段、2px 内衬、滑块靠 --hero-media-layout-seg-index × 26px 平移）。
   ⚠️ 电脑端不动：壳在 10-chat-bubbles-media.css 里是 `display: contents`、滑块不画。 */
html[data-mobile-home-chat-shell] .hero-results-image-toolbar .hero-results-image-layout-seg {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 26px;
    padding: 2px;
    border-radius: 999px;
    background: var(--gen-settings-block-bg, var(--bg-elev-2, rgba(0, 0, 0, 0.055)));
    box-sizing: border-box;
}

html[data-mobile-home-chat-shell] .hero-results-image-toolbar .hero-results-image-layout-seg-thumb {
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    z-index: 0;
    display: block;
    width: 26px;
    transform: translateX(calc(var(--hero-media-layout-seg-index, 1) * 26px));
    border-radius: 999px;
    background: var(--segment-pill-bg, #ffffff);
    box-shadow: var(--segment-pill-shadow, 0 1px 2px rgba(15, 23, 42, 0.1));
    pointer-events: none;
    transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 段里的两颗：26×22 的图标键，底色交给滑块（第 1484 轮那条「28px 方键」要盖回来） */
html[data-mobile-home-chat-shell] .hero-results-image-toolbar .hero-results-image-layout-seg .hero-results-image-layout-btn,
html[data-mobile-home-chat-shell] .hero-results-image-toolbar .hero-results-image-layout-seg .hero-results-image-layout-btn:hover,
html[data-mobile-home-chat-shell] .hero-results-image-toolbar .hero-results-image-layout-seg .hero-results-image-layout-btn:focus-visible,
html[data-mobile-home-chat-shell] .hero-results-image-toolbar .hero-results-image-layout-seg .hero-results-image-layout-btn[aria-pressed="true"] {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 22px;
    padding: 0;
    justify-content: center;
    background: none;
    color: var(--text-secondary, rgba(26, 21, 35, 0.72));
}

html[data-mobile-home-chat-shell] .hero-results-image-toolbar .hero-results-image-layout-seg .hero-results-image-layout-btn[aria-pressed="true"] {
    color: var(--text-primary, #1a1523);
}

html[data-mobile-home-chat-shell] .hero-results-image-toolbar .hero-results-image-layout-seg .hero-results-image-layout-btn svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* ========== 第 1507 轮（移动端：创作栏上方遮罩 + 排列两档的图片外形） ========== */

/* ① 「@div（div.prompt-box.is-prompt-expanded，创作栏）的上方要显示遮罩，具体参考电脑端」——
   电脑端那道是 `#panel-home .hero:has(> .hero-results:not([hidden]))::after` 上的
   「95px + 圆角」渐隐（10-composer-send.css 第 582～586 轮：贴创作栏 20px + 圆角半径那一段全不透，
   再往上渐开；下沿还要压进创作栏一个圆角半径，好盖住两个上圆角外的缺口）。
   ⚠️ 第 1848 轮（需求）：「@button#hero-chat-scroll-bottom 会被遮罩遮挡」——
      这层原来挂在 `.hero::before`（z-index 3）。「回到底部」圆钮虽然写着 z-index 4，
      但它住在 `.hero-results`（z-index 1，自成层叠上下文）里，4 只在那一层里比大小，
      出来了整块还是压在 3 下面 —— 于是圆钮正好落在遮罩带里被糊成一片（实测：hero 545.8~665.8，
      圆钮 603~631）。现在把这层挪进 `.hero-results-panel::before`：圆钮和它是同一个层叠上下文里的
      兄弟，4 > 3，圆钮浮在上面；聊天消息仍是 z-index auto，照样被遮罩压住、该淡出的照旧淡出。
      （`.hero::before` 那边还回首页那层辉光，聊天态它本来就是 `opacity: 0 !important`。）
   ⚠️ 权重：`--hero-...` 这些变量都在 `.hero` 上，伪元素挂在更里面的 panel 上照样能读到。 */
html[data-mobile-home-chat-shell] #panel-home:has(.hero-results:not([hidden])) .hero-results-panel::before {
    content: "";
    position: absolute;
    /* ⚠️ 必须显式写 top: auto：这个伪元素同时也是首页那层辉光（07-hero.css 的
       `#panel-home .hero::before`），那边写着 `inset: 0` —— top 被钉成 0 之后，
       绝对定位盒同时有 top/bottom/height 时 bottom 会被丢掉，遮罩就跑到 hero 顶上去了
       （第 1508 轮实机踩到：遮罩显示在顶栏下拉一点处）。 */
    top: auto;
    /* 第 1508 轮（需求）：「遮罩的底边应该显示在创作栏的顶边下来 25px 位置」——
       压进创作栏的那一段从「一个圆角半径（28）」定成 25px；渐变实色段仍是「20px + 这一段」，
       所以贴创作栏那一带的实色比上一轮矮 3px、上沿也跟着低 3px。 */
    --mobile-prompt-mask-corner: 25px;
    left: var(--mobile-home-prompt-box-inset, 10px);
    right: var(--mobile-home-prompt-box-inset, 10px);
    /* 下沿贴创作栏上沿、再往下压 --mobile-prompt-mask-corner（还没到 28px 那个圆角半径，
       所以两个上圆角外的缺口靠这一段实色盖住的前提不再成立 —— 用户要的就是这条边） */
    bottom: calc(
        var(--safe-bottom, 0px) + var(--hero-disclaimer-stack, 0px) + var(--hero-prompt-h, 0px) -
            var(--mobile-prompt-mask-corner, 25px)
    );
    height: calc(95px + var(--mobile-prompt-mask-corner, 25px));
    background: linear-gradient(
        to top,
        var(--bg-base, #f8f7f7) calc(20px + var(--mobile-prompt-mask-corner, 25px)),
        transparent
    );
    opacity: 1 !important;
    pointer-events: none;
    /* 与电脑端同层：压住对话区（1）与免责声明（2），让「回到底部」（4）/ 预设标签（5）留在上面 */
    z-index: 3;
}

/* ② 「@button（垂直排序）选择后：图片第一张的顶部圆角和最后一张底部圆角」——
   竖排那条（10-chat-bubbles-media.css 第 556 行起）把圆角整条收成 0；本轮只放回首尾那两个：
   第一张留上圆角、最后一张留下圆角，中间照旧贴边。半径跟宫格同一个 token。
   ⚠️ 叠层（重新生成的覆盖图）也画着同一个圆角，首尾那张要一起圆，否则四个角会露出直角。 */
html[data-mobile-home-chat-shell] .hero-results-image-grid--list > .hero-results-image-cell:first-child .hero-results-image-btn,
html[data-mobile-home-chat-shell] .hero-results-image-grid--list > .hero-results-image-cell:first-child .hero-results-image,
html[data-mobile-home-chat-shell] .hero-results-image-grid--list > .hero-results-image-cell:first-child .hero-results-image-layer {
    border-top-left-radius: var(--chat-bubble-media-radius, 20px);
    border-top-right-radius: var(--chat-bubble-media-radius, 20px);
}

html[data-mobile-home-chat-shell] .hero-results-image-grid--list > .hero-results-image-cell:last-child .hero-results-image-btn,
html[data-mobile-home-chat-shell] .hero-results-image-grid--list > .hero-results-image-cell:last-child .hero-results-image,
html[data-mobile-home-chat-shell] .hero-results-image-grid--list > .hero-results-image-cell:last-child .hero-results-image-layer {
    border-bottom-left-radius: var(--chat-bubble-media-radius, 20px);
    border-bottom-right-radius: var(--chat-bubble-media-radius, 20px);
}

/* ③ 「@button（宫格排序）选择后图片间隔为 5px」——宫格那条是 12px（10-chat-bubbles-media.css），
   手机端收到 5px。竖排那条（gap: 0）不受影响（选择器已经排除 --list）。 */
html[data-mobile-home-chat-shell] .hero-results-image-grid:not(.hero-results-image-grid--list) {
    gap: 5px;
}

/* ========== 第 1511 轮（移动端：个人中心几处） ========== */

/* ① 「个人中心界面底部不要圆角」——
   抽屉那条规则本来就写着「上圆 16、下圆 0」，可 48-glass-surfaces.css 里那条
   `html body :is(#home-gen-strip-menu, #user-menu):not(#glass-a):not(#glass-b)` 带着 3 个 id
   （权重 3,x,x）把四角统一压成 24px —— 于是抽屉落地时下边还是圆的、露出一截背景。
   这里用 !important 把下圆角钉回 0（上圆角保持那条规则的 16px）。
   ⚠️ 只在手机壳里：电脑端那张卡片本来就是四角 24。 */
html[data-mobile-home-chat-shell] #user-menu:not([hidden]) {
    border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0 !important;
}

/* ② 「偏好设置页 / 修改账号页 / 账单查询页这些界面背景色要和个人中心背景色一致」——
   这三页的头部与内容区被下面那条规则刷成 --user-menu-surface-bg（纯白）：
     html:not([data-workflow-active]) .app-sidebar-footer .user-menu-wrap
       .user-menu.is-*-view:not([hidden]) .user-menu-settings-head / …-body
   而个人中心本体是玻璃面（--glass-surface-bg 83%）。手机端把这几块刷回透明，
   直接露出抽屉自己那层玻璃 —— 和主视图同一张脸；里面的白色卡片
   （--user-menu-surface-card-bg）照旧，层次不变。 */
/* ⚠️ 权重得凑到两个 id：那几条刷白底的原句里有 `#user-menu #settings-popover-body` 这种
   「id + id」写法（2,0,0），只写 `#user-menu .user-menu-settings-body` 会被它压回来。 */
html[data-mobile-home-chat-shell] #user-menu :is(#user-menu-pane-settings, #user-menu-pane-account, #user-menu-pane-billing, #user-menu-pane-feedback, #user-menu-pane-notify) .user-menu-settings-head,
html[data-mobile-home-chat-shell] #user-menu #settings-popover-body,
html[data-mobile-home-chat-shell] #user-menu #user-account-settings-body,
html[data-mobile-home-chat-shell] #user-menu #user-billing-body {
    background: transparent !important;
}

/* ========== 第 1512 轮（移动端：反馈 / 兑换码弹层补齐返回键 + 下拉界面玻璃面） ========== */

/* ① 「兑换码充值界面……怎么有两个关闭按钮」——
   卡片自己带一颗 .points-redeem-close（电脑端那颗），手机端 11-auth-boot.js 的
   ensureMobileSheetCloseBtn 又往标题行里塞了一颗 .mobile-sheet-close —— 于是右上角两颗 ×。
   手机端把卡片自带的这颗收掉，只留标题行那颗（它同时也接拖拽 / 标题行那套）。
   返回键（.mobile-sheet-back）由 JS 按 showBack 露出，位置在标题左边，不用另写样式。 */
html[data-mobile-home-chat-shell] .points-redeem-card > .points-redeem-close {
    display: none !important;
}

/* ①·补 「问题反馈界面怎么没有返回按钮，兑换码充值界面也没有返回按钮」——
   上面 8608 那条 `.mobile-sheet-title-row.has-back .mobile-sheet-back:not([hidden]){display:none!important}`
   是"全局先藏，只给 #user-menu 开一个口子"的写法；这里给反馈 / 兑换码两张卡片也开同样的口子。 */
html[data-mobile-home-chat-shell] .feedback-card .mobile-sheet-title-row.has-back .mobile-sheet-back:not([hidden]),
html[data-mobile-home-chat-shell] .points-redeem-card .mobile-sheet-title-row.has-back .mobile-sheet-back:not([hidden]) {
    display: inline-flex !important;
}

/* ② 「@button#gen-settings-dropdown-trigger 和 @button#mobile-mode-model-combo-trigger
   的下拉界面的毛玻璃透明度要和个人中心界面一致」——
   这两张下拉在手机上是底部弹层（#mobile-prompt-sheet-body，`.mobile-prompt-sheet-body`），
   底色写死成 --mobile-sheet-surface-bg（纯白 / 深色 #121212）、没有磨砂；
   个人中心那层是玻璃面（--glass-surface-bg + --glass-filter，用户在全站弹层外观里调的
   颜色 / 透明度都算在内）。这里把这两张弹层换成同一份玻璃面 —— 里面那些设置块
   （--gen-settings-block-bg、白色卡片）本来就自带底色，层次不受影响。 */
html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-card,
html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-card,
html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-card,
html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-card {
    background: var(--glass-surface-bg, var(--bg-base, #f2f2f4)) !important;
    backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
    -webkit-backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
}

html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="gen-settings"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body,
html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-body,
html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="gen-settings"] .mobile-prompt-sheet-body,
html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="mode-model"] .mobile-prompt-sheet-body {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ========== 第 1513 轮（移动端：「类型 · 模型」的档位排要和「套图设置」那颗胶囊一致） ========== */

/* 用户原话：「@div#mobile-sheet-mode-options 样式要和 @div（.gen-settings-image-set-mode）一致」。
   现状：轨道是透明/白底 + 选中一颗灰胶囊（.mode-select-flow 用 --mode-model-tab-active-bg）；
   对方（常规 / 电商套图 / 模块套图）= 一层浅灰凹槽（--gen-settings-block-bg，3px 内衬、10px 圆角）
   + 里面一颗白色选中胶囊（--segment-pill-bg，8px 圆角）。这里把前者换成后者的口径，
   滑动的 flow 胶囊保留（只是改成白底），动画不受影响。
   ⚠️ 下面第 5xxx 行那条 `html[data-mobile-prompt-sheet-open="mode-model"]
   #mobile-prompt-sheet-root .mobile-prompt-sheet-section .model-select-option` 给模型行写的是
   `border-radius: 999px !important` + `color: var(--text-primary)`，类型行也吃到了；
   这里必须带 `#mobile-prompt-sheet-root` 把权重抬到同一档，再用 !important 压回来。 */
html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-section.chip-dropdown-panel-mode .mobile-prompt-sheet-mode-track,
html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-section.chip-dropdown-panel-mode .chip-dropdown-options-mode {
    align-items: center;
    gap: 4px;
    padding: 3px !important;
    border-radius: 10px !important;
    background: var(--gen-settings-block-bg, var(--bg-elev-2, rgba(0, 0, 0, 0.055))) !important;
}

/* 深色下「套图设置」那条轨道是实色 #242424（见 .chip-dropdown-panel-gen-settings 的
   --gen-settings-block-bg 覆盖），这张弹层不在那个作用域里，得自己补一条同值。 */
html[data-mobile-home-chat-shell][data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-section.chip-dropdown-panel-mode .mobile-prompt-sheet-mode-track,
html[data-mobile-home-chat-shell][data-theme="dark"][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-section.chip-dropdown-panel-mode .chip-dropdown-options-mode {
    background: #242424 !important;
}

html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-flow {
    border-radius: 8px;
    background: var(--segment-pill-bg, #ffffff);
    box-shadow: none;
}

html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option {
    height: 32px;
    min-height: 32px;
    padding: 0 4px;
    border-radius: 8px !important;
    color: var(--text-secondary) !important;
}

html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option .model-select-option-title {
    font-size: 12px;
    font-weight: 400;
}

html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option:not(.is-active):hover,
html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option:not(.is-active):focus-visible {
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* 选中档不再加粗：对方那颗也是同一个字重，只靠白胶囊 + 主文字色区分。 */
html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option.is-active,
html[data-mobile-home-chat-shell][data-mobile-prompt-sheet-open="mode-model"] #mobile-prompt-sheet-root .mobile-prompt-sheet-mode-track .mode-select-option.is-active .model-select-option-title {
    font-weight: 400;
    color: var(--text-primary) !important;
}


/* ========== 第 1515 轮（移动端：消息中心顶部圆角 / 收掉重复的关闭键与标题 / 全部已读挪位） ========== */

/* 用户原话：「消息中心界面顶部要圆角」「@button#notify-sheet-close」「@div（.notify-sheet-head-text）删除，
   全部已读按钮移到关闭按钮左边」。
   手机端这张 sheet 的标题行是 JS 生成的（左边标题、右上角关闭键），卡片自己还写着
   一颗绝对定位的 × 和一份「消息中心 / 系统消息和活动通知」——两两重复，这里收掉重复的那份。
   全部已读由 JS 从 .notify-sheet-head 挪到卡片上（见 10-chrome-settings.js 的
   syncNotifyMarkAllPlacement），绝对定位到标题行关闭键的左边。 */
.notify-sheet-card {
    border-radius: var(--mobile-sheet-top-radius, 16px) var(--mobile-sheet-top-radius, 16px) 0 0 !important;
}

#panel-notify .notify-sheet-close {
    display: none !important;
}

#panel-notify .notify-sheet-head {
    display: none !important;
}

/* 关闭键在 top:8 / right:10 / 24×24，这里贴着它左边 8px。 */
#panel-notify .notify-mark-all-read {
    position: absolute;
    top: 8px;
    right: 42px;
    z-index: 41;
    height: 32px;
    margin: 0;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ========== 第 1516 轮（移动端：偏好设置里「全站弹层外观」那行的左右对齐） ========== */

/* 用户原话：「@div（.settings-global-modal-surface-row）的标签左边要对齐上方功能的标签左边，
   设置按钮的右边要对齐上方功能的右边」。
   同一张卡里其它行（参考缩略图形状、创作栏外观……）都在 .settings-section 那层让出了 8px
   （实机：行 18..366、标签 34、控件右缘 350），而这一行的 section 写着 `padding: 0`，整行铺到
   10..374 去（标签 26、控件右缘 358）。这里补回同样的 8px 内缩，两边就对齐了。 */
#user-menu .settings-global-modal-surface-row {
    margin-inline: 8px;
}

/* ========== 第 1517 轮（移动端：偏好设置两处左右对齐） ========== */

/* ① 用户原话：「生成媒体边框左右两边也是没有对齐上方功能两边」——
   这一行是 `.settings-topbar-row.settings-toggle-row`，它没有吃到同卡其它行的 8px 内缩
   （实机 10..374，而上下几行都是 18..366）。把同样的内缩补到行上，里面的 label 自己带 16px
   内衬，开关右缘就回到 350，和上下几行的开关对齐。 */
#user-menu .settings-chat-bubble-media-border-row {
    margin-inline: var(--user-menu-row-inset, 8px);
    width: calc(100% - var(--user-menu-row-inset, 8px) * 2);
}

/* ② 用户原话：「@input#workflow-node-toolbar-surface-color 要对齐 @input#workflow-node-surface-color，
   @label（跟随创作栏）的右边要对齐 @span（开关轨道）的右边」——
   「节点背景色」那行的网格是 `1fr 200px max-content`，第三列（复位键）隐藏时 1fr 正好是 100，
   色板落在 142..170；「工具条背景色」这行第三列是「跟随创作栏」那颗开关（max-content ≈ 140），
   1fr 被挤成 0，色板跑到 42、开关又撑到 382。
   这里把开关从网格里摘出来绝对定位到行右内衬（右缘 350），第三列留 0 宽 —— 1fr 重新是 100，
   色板回到 142，与「节点背景色」那颗同一个 x。 */
#user-menu .settings-workflow-node-toolbar-surface-row {
    grid-template-columns: minmax(0, 1fr) 200px 0px;
}

/* 下面这条要压过 `#settings-popover-body .settings-card .settings-toggle.settings-toggle-inline`
   那条「8px 内缩 + width: calc(100% - …)」（同为 1 个 id 起头，这边多一个类）。 */
#settings-popover-body .settings-card .settings-workflow-node-toolbar-surface-row > .settings-toggle.settings-toggle-inline {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: max-content;
    min-width: 0;
    margin: 0;
    justify-content: flex-end;
    gap: 8px;
}

/* ========== 第 1518 轮（移动端：放大查看之后提示词框按内容撑开） ========== */

/* 用户原话：「@button（.gen-preview-max-btn 放大查看）点击放大之后 @textarea（.gen-preview-prompt）
   高度要自适应把里面内容全部显示」。

   第 1484 轮为了「一行 70px」把已出图那行的提示词框夹成 53px（height/max-height 都带 !important，
   单元格 `overflow: hidden`），放大态整张卡铺满全屏后依旧是 53px —— 实机内联已经算好 292px，
   计算高度还是 53px、`scrollHeight 986 / clientHeight 51`，大半提示词被塞进内滚轮里。
   这里在放大态把行 / 单元格那三层夹子解开；`height` 那一条留给 JS 处理：
   `autosizeGenPreviewPrompt()` 在放大态把高度写成内联 `!important`（内联 important 压得住
   1484 那条 `height: 53px !important`，而普通内联值压不住 —— 所以不能在这里写 height）。 */
html[data-mobile-home-chat-shell] body.is-gen-preview-maximized .gen-preview-table tbody tr:has(.gen-preview-status-media) {
    height: auto !important;
}

html[data-mobile-home-chat-shell] body.is-gen-preview-maximized .gen-preview-table tbody tr:has(.gen-preview-status-media) td {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

html[data-mobile-home-chat-shell] body.is-gen-preview-maximized .gen-preview-table tbody tr:has(.gen-preview-status-media) .gen-preview-prompt {
    max-height: none !important;
    min-height: 53px !important;
    overflow-y: hidden !important;
    resize: none;
}

/* ========== 第 1533 轮（移动端：提示词格右下角那颗「让编导改这段」的聊天键） ========== */

/* 用户原话：「@textarea 鼠标悬停右下角悬浮一个聊天图标按钮……」—— 触屏没有悬停，
   电脑端那颗键靠 `:hover` 才露，手机上就永远点不到。这里让它常态可见（仍压在格子右下角），
   并且往上提 4px：手机端未出图的行是自动高度、已出图的行走 70px 夹子，
   贴着底边会压住最后一行字。 */
html[data-mobile-home-chat-shell] .gen-preview-refine-btn {
    right: 14px;
    bottom: 14px;
    opacity: 1;
    pointer-events: auto;
}

/* 第 1615 轮：改整张表的铅笔已经搬进卡头（和放大键并排），格子里只剩聊天键，
   原来给它让位的 42px 那条跟着删掉。 */

html[data-mobile-home-chat-shell] .gen-preview-refine-pop {
    width: min(232px, calc(100vw - 24px));
}

/* ========== 第 1624 轮（移动端：卡头那颗「生成套图」改叫「生成」） ==========
   用户原话：「移动端：@button（.gen-preview-batch-gen）名称改成生成」——
   这颗键在手机上占 90px，卡头那排工具一共 ~314px、把标题挤成两行（第 1623 轮）。
   按钮里本来就画了全名 / 短名两段（见 04-pricing 的 genPreviewTableHtml）：
   这里只切可见的那段，`aria-label` / `title` 仍是全名「生成套图」
   —— 悬停气泡和读屏念全名，眼睛看到的是「生成」。
   ⚠️ 用视口判断（这个文件整份就在 ≤900px 里），不依赖 JS 的 data-mobile-home-chat-shell：
      那个属性是布局同步时才写的，首帧 / 被节流的标签页里可能还没有。 */
.gen-preview-batch-gen-text {
    display: none;
}

.gen-preview-batch-gen-text-short {
    display: inline;
}
/* 第 952 轮（需求）：
   「全站的菜单界面和弹层界面 背景色 / 透明效果 / 双边框等等样式都要和
     #gen-settings-drawer 一致」

   抽屉那套规格（token 见 01-reset-tokens 的 --glass-*，本体见 10-prompt-desktop-dock 的 .gen-drawer）：
     · 底色 color-mix(--bg-base 92%, transparent)
     · 磨砂 blur(10px) saturate(1.5)
     · 边框：外圈 1px --gen-drawer-border（浅色纯白 / 深色 12% 白）；第 953 轮撤掉内侧线
     · 浮层投影 --glass-drop（抽屉贴在创作栏上不用投影，菜单 / 弹窗要压住内容）

   这份文件排在 manifest 最后，统一用 !important 落地。各组件原来的底色 / 描边 / 投影写法
   五花八门，而且首页创作栏那批还带着 `html[...] :is(#panel-home .prompt-box …)` 这种
   带 id 的 !important 规则（权重 1,4,x）—— 单靠层叠顺序压不动，所以这里用两枚不存在的
   id（:not(#glass-a):not(#glass-b)）把权重顶到 2,x,x，才真正「全站一个样」。

   :not(.gen-drawer-panel-host *) 把抽屉内部那块排掉：它是从下拉面板搬进来的同一份 DOM，
   玻璃面交给抽屉本体，自己保持透明（否则会套出第二层底、变成三层边框）。

   第 1744 轮（需求）：「@div#image-preview-ai-popover 的背景和透明效果要和
   @div.image-preview-extra-row.is-card（参考线样式那块卡片）一致」——
   停靠进修图工具列的那一份（`#image-preview-studio-tools …`）也排掉：它已经不是浮层，
   而是那一列参数卡片里的一块，底色由 39-photo-edit.css 按卡片那份写。浮层态照旧走玻璃面。 */

/* ── ① 浮层菜单 ─────────────────────────────────────────────────── */
html body :is(
        .chip-dropdown-panel,
        .chip-dropdown-menu,
        .settings-dropdown-menu,
        .settings-lang-menu,
        .composer-translate-menu,
        .composer-batch-add-menu,
        .quick-prompts-panel,
        .quick-tag-menu,
        .mention-popover,
        .gen-settings-select-menu,
        .gen-drawer-mode-menu,
        .action-confirm-popover-panel,
        .ai-create-tool-guide-pop,
        .mode-dropdown-panel,
        .cloud-storage-filter-panel,
        .image-preview-body-size-menu,
        .image-preview-zoom-speed-menu,
        .image-preview-ai-popover,
        .user-menu-main-card,
        .user-menu-surface-card,
        /* 第 954 轮（需求）：「@button#home-gen-strip-btn（生成记录）的菜单界面和
           个人中心界面不要阴影效果」—— 这两块上一轮漏在清单外，各自还挂着
           0 12px 32px 那两层投影（底色也只有 80%）。一起并进来：
           跟抽屉同一份 92% 底 + 一圈白边 + 无投影。 */
        #home-gen-strip-menu,
        #user-menu,
        /* 第 1397 轮：缩略图右键那颗也走同一份玻璃面（需求「毛玻璃透明度一致」） */
        #home-gen-strip-context-menu
    ):not(#glass-a):not(#glass-b):not(.gen-drawer-panel-host *):not(.image-preview-studio-tools .image-preview-ai-popover) {
    /* ⚠️ 第 1802 轮（回归修复）：这里**不能**再挂 `:not(#quick-tag-menu)`。
       第 1678 轮为了把那颗菜单排出去加了一个 id 级 `:not()`，权重从 (3,4,2) 涨到 (4,4,2) ——
       而「个人中心只留一层玻璃」那条（本文件 48-glass 末尾，`html body #user-menu :is(...)`
       挂三枚假 id = (4,1,2)）和「那三屏分类不要边框」那条（同样 (4,1,2)）靠的就是
       id 数压这条一头。id 一旦打平、这条的类选择器更多，它反而赢了：
       个人中心里每张卡又各自糊一层 54% 玻璃 + 白边，叠出来几乎不透明，
       毛玻璃全没了。第 1680 轮那颗菜单已经改回半透玻璃面（跟 #home-goals-menu 一致，
       见 11-quick-templates.css），本来也不需要排出去。 */
    background: var(--glass-surface-bg, color-mix(in srgb, var(--bg-base, #f8f7f7) 92%, transparent)) !important;
    border: var(--gen-drawer-border-w, 1px) solid var(--gen-drawer-border, #fff) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
    background-image: none !important;
    backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
}

/* ── ② 弹层 / 弹窗 ───────────────────────────────────────────────── */
/* 第 979 轮（需求）：「@div#image-preview-body-frame 除了 @img#image-preview-img 其他位置不要显示背景色」——
   聊天里点开大图走的是「纯查看器」（`.is-plain-viewer`），那时候整块 `.image-preview-dialog`
   不该再铺这层 92% 玻璃底 + 白边 + 磨砂：铺了就是图片外面套一张灰卡片。
   修图 / 模板那些正经弹层照旧（它们要有画布表面）。 */
/* 第 1210 轮（需求）：「弹出的通知背景色为白色，圆角为 32px」——
   这里把通知弹窗那颗 `.notify-popup-card` 排掉：它是**固定白底**，不跟玻璃面走
   （白底 + 32px 圆角 + 自己的投影写在 05-notifications.css 里）。 */
html body :is(.modal-card, .link-parse-consent-card, .mobile-prompt-sheet-card):not(#glass-a):not(#glass-b):not(.notify-popup-card),
html body .image-preview-modal:not(.is-plain-viewer) > .image-preview-dialog:not(#glass-a):not(#glass-b) {
    background: var(--glass-surface-bg, color-mix(in srgb, var(--bg-base, #f8f7f7) 92%, transparent)) !important;
    border: var(--gen-drawer-border-w, 1px) solid var(--gen-drawer-border, #fff) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
    backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
}

/* 第 1622 轮（需求）：「@div（.modal-card.modal-card-form.image-set-module-card，编辑模块那张）
   背景色改成白色，界面以外为毛玻璃遮罩，账号登录界面背景色也要白色」——
   弹层卡不再跟菜单一起铺半透明玻璃面，改成**不透明的白色卡片**（深色主题用它自己的
   面板色 #1e1e1e，不硬写白）；「毛玻璃」那半句交给外面那层遮罩去做
   （`.modal-overlay` 在 18-modals.css 里加了 backdrop-filter，见 --modal-overlay-filter）。
   登录卡（#login-modal .modal-card.login-card.auth-card）本来就是 `.modal-card`，这一条一起管到。
   ⚠️ 权重：上面那条是 (2,3,2)，这里三个 `:not(#…)` 把 id 数顶到 3 → (3,2,2)，
      才能同时压过它和 1017 轮那条给充值卡单独铺玻璃底的 (3,1,2)。
   ⚠️ `.notify-popup-card` 照第 1210 轮排掉（通知弹窗是固定白底 + 32px 圆角，自己那套）。 */
html body .modal-card:not(.notify-popup-card):not(#glass-a):not(#glass-b):not(#glass-c) {
    background: var(--modal-card-bg, #fff) !important;
}

/* 第 1017 轮（需求）：「@div（div.modal-card.login-card.points-redeem-card，兑换码充值那张）
   界面不要添加边框」——
   上面那条给所有 `.modal-card` 挂了 1px 白边；充值是贴右边整高的抽屉，
   描边只会在屏幕边缘留一条亮线。
   ⚠️ 权重：上面那条带 `:not(#glass-a):not(#glass-b)`，两个 :not 各算一个 id —— 它是 (2,3,2)。
   只写 `#points-redeem-modal .points-redeem-card` 只有 1 个 id，压不住。
   这里照它的形状写一份（`:is()` 里带 id、外面同样两个 :not），拿到 (3,2,2) 才真的能覆盖。 */
html body :is(#points-redeem-modal .points-redeem-card):not(#glass-a):not(#glass-b) {
    border: none !important;
}

/* 第 1017 轮（需求）：「消息界面和积分充值界面打开之后界面以外的地方要使用毛玻璃效果，
   可以参考资产库界面」——
   资产库那颗遮罩是 blur(14px) saturate(1.25) + 36% 深色底（见 24-asset-library.css），
   这两处照抄：底色也从原来那层更实的 --modal-overlay-bg 降到 36%（深色 52%），
   不然糊了也看不出来。 */
html body .notify-sheet-overlay,
html body #points-redeem-modal .modal-overlay {
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    background: color-mix(in srgb, #0f172a 36%, transparent);
}

[data-theme="dark"] body .notify-sheet-overlay,
[data-theme="dark"] body #points-redeem-modal .modal-overlay {
    background: color-mix(in srgb, #000 52%, transparent);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] body .notify-sheet-overlay,
    [data-theme="system"] body #points-redeem-modal .modal-overlay {
        background: color-mix(in srgb, #000 52%, transparent);
    }
}

/* 消息中心和积分充值卡也是全站弹层表面，跟随用户设置的颜色与透明度。 */
html body #panel-notify .notify-sheet-card,
html body :is(#points-redeem-modal .points-redeem-card):not(#glass-a):not(#glass-b) {
    background: var(--glass-surface-bg, #1e1e1e) !important;
}

/* 第 1260 轮（需求）：「@div（div.modal-card.hero-image-text-card，图片编辑弹层）界面以外为毛玻璃效果」——
   遮罩原来只是 `.modal-overlay` 那层 30% 的深色底（--modal-overlay-bg），糊不出东西。
   照资产库 / 消息界面那一套来：blur(14px) saturate(1.25) + 36% 深色底（深色主题 52%）。
   ⚠️ 底色必须比 --modal-overlay-bg 淡一档，否则糊了也看不出来。 */
html body #hero-image-text-modal .modal-overlay {
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    background: color-mix(in srgb, #0f172a 36%, transparent);
}

[data-theme="dark"] body #hero-image-text-modal .modal-overlay {
    background: color-mix(in srgb, #000 52%, transparent);
}

/* 第 1367 轮：视频重生成弹层（选段 + 首尾帧）的遮罩照图片编辑弹层那一套 ——
   同一个弹层家族，别一个毛玻璃一个没有。 */
html body #hero-video-clip-modal .modal-overlay {
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    background: color-mix(in srgb, #0f172a 36%, transparent);
}

[data-theme="dark"] body #hero-video-clip-modal .modal-overlay {
    background: color-mix(in srgb, #000 52%, transparent);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] body #hero-video-clip-modal .modal-overlay {
        background: color-mix(in srgb, #000 52%, transparent);
    }
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] body #hero-image-text-modal .modal-overlay {
        background: color-mix(in srgb, #000 52%, transparent);
    }
}

/* 第 1275 轮（需求）：「@div（div.modal-card.stack-quick-gen-card）界面以外的地方毛玻璃效果」——
   快捷生成 / 抠图弹层的遮罩原来只有 `.modal-overlay` 那层 30% 深色底，糊不出东西。
   照图片编辑弹层（第 1260 轮）那一套来：blur(14px) saturate(1.25)。
   浅色主题的底色跟 --modal-overlay-bg 一个量级（30%），只是多了糊 —— 卡片是白底，
   底色再淡就压不住了；深色主题照旧走 52% 那档。 */
html body #stack-quick-gen-modal .modal-overlay {
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    background: color-mix(in srgb, #0f172a 30%, transparent);
}

[data-theme="dark"] body #stack-quick-gen-modal .modal-overlay {
    background: color-mix(in srgb, #000 52%, transparent);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] body #stack-quick-gen-modal .modal-overlay {
        background: color-mix(in srgb, #000 52%, transparent);
    }
}

/* 添加预设弹窗以外的页面区域沿用全站弹层的毛玻璃遮罩。 */
html body #quick-prompt-modal .modal-overlay {
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    background: color-mix(in srgb, #0f172a 36%, transparent);
}

[data-theme="dark"] body #quick-prompt-modal .modal-overlay {
    background: color-mix(in srgb, #000 52%, transparent);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] body #quick-prompt-modal .modal-overlay {
        background: color-mix(in srgb, #000 52%, transparent);
    }
}

/* 第 954 轮：生成记录的右键 / 悬停菜单与个人中心面板——圆角沿用 24px，
   投影一律撤掉（上面那条已经给 box-shadow: none，这里只是把圆角钉住，
   免得被各自文件里的旧声明拉开）。 */
html body :is(#home-gen-strip-menu, #user-menu):not(#glass-a):not(#glass-b) {
    border-radius: 24px;
}

/* ── ③ 只接管「描边颜色」的那一拨浮层 ───────────────────────────────
   第 1034 轮（需求）：「全部弹层和菜单界面的边框颜色都要和首页创作栏的颜色一致」。

   ① / ② 两份清单里的组件整圈都读 `--gen-drawer-border`，而那个 token 本轮已经等于
   创作栏底色（见 01-reset-tokens），它们自动跟上、这里不用再列一遍。
   剩下这批弹层各自写着 `--border-soft / --border-mid` 之类的描边，底色 / 投影 / 磨砂
   都是各自调过的 —— 所以这里**只接管颜色**，其余一个字不动（写 background 会把
   通知中心、AI 创作那些自定义面板一起改掉）。

   ⚠️ 权重照抄 ①②：两枚不存在的 id 把权重顶到 (2,x,x)，才压得住带 id 的 !important 老规则。 */
html body :is(
        /* 顶栏 / 通知 */
        #topbar-primary-nav-menu,
        #topbar-primary-nav-menu .topbar-logo-submenu,
        .notify-popover,
        /* 个人中心里的下拉 */
        .settings-popover,
        .settings-lang-menu,
        /* AI 工具 / AI 创作那一批 */
        .ai-tool-select-menu,
        .ai-create-queue-menu,
        .ai-create-choice-popover,
        .ai-create-menu,
        #ai-create-settings-menu,
        #ai-create-director-voice-menu,
        .ai-create-fixed-param-menu,
        .ai-create-thread-menu,
        #ai-create-model-menu,
        #ai-create-drafts-popover,
        /* 素材库 / 聊天里的右键菜单（第 405 轮那组里没列进来的两支） */
        .materials-context-menu-submenu,
        /* 首页对话里的选择气泡 */
        .hero-chat-choice-popover,
        /* 侧栏底部「⋯」那颗按钮弹出的菜单 */
        .app-sidebar-more-menu
    ):not(#glass-a):not(#glass-b) {
    border-color: var(--gen-drawer-border, #fff) !important;
}

/* 下拉菜单也跟随「全站弹层外观」的 --glass-surface-bg / --glass-filter；
   外层菜单壳负责底色和磨砂，内部面板透明，避免叠出两层不透明表面。 */

html body .chip-dropdown-panel:not(#glass-a):not(#glass-b):not(#glass-c) {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* 类型 / 模型菜单的外壳也吃上面的全站弹层 token；撤掉组件自带投影。
   桌面端菜单会停靠到 body，第二个选择器用 :has() 识别停靠后的菜单节点。 */
html body :is(.chip-dropdown-mode, .chip-dropdown-model) > .chip-dropdown-menu:not(#glass-a):not(#glass-b):not(#glass-c),
html body > .chip-dropdown-menu.is-desktop-prompt-dropdown-fixed:not(#glass-a):not(#glass-b):not(#glass-c):has(> .chip-dropdown-panel-mode, > .chip-dropdown-panel-model) {
    box-shadow: none !important;
}

/* 菜单外壳承担唯一一层全站玻璃表面；里层不能再叠磨砂或描边。 */
html body :is(.chip-dropdown-mode, .chip-dropdown-model) :is(.chip-dropdown-panel, .chip-dropdown-options-mode, .chip-dropdown-options-model):not(#glass-a):not(#glass-b):not(#glass-c),
html body > .chip-dropdown-menu.is-desktop-prompt-dropdown-fixed:has(> .chip-dropdown-panel-mode, > .chip-dropdown-panel-model) :is(.chip-dropdown-panel, .chip-dropdown-options-mode, .chip-dropdown-options-model):not(#glass-a):not(#glass-b):not(#glass-c) {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ── 第 1269 轮（需求）：「个人中心界面的透明度和毛玻璃效果要和 #gen-settings-drawer 一致」──
   ① 那份浮面清单把 `.user-menu-main-card` / `.user-menu-surface-card` 也收了进去，
   于是个人中心里**每一张卡片**都在 `#user-menu` 那层 92% 玻璃之上再糊一层 92% 玻璃、
   再磨一次砂：叠出来约 99.4% 不透明，底下的画面一点也透不上来 —— 跟抽屉「只有一层玻璃、
   能看到背后虚化的界面」完全不是同一个观感。
   这里把内层卡片退回透明（白边 / 圆角 / 圆角内的排版都不动），个人中心只剩 `#user-menu`
   自己那一层玻璃，底色 / 磨砂 / 白边逐项等于抽屉。
   ⚠️ 权重：① 是 (3,1,3)（两枚假 id + `:is()` 里那颗 id）。而且 styles-pages.css / styles-mobile.css
      里各有一份 ① 的拷贝、且都排在 styles.css 之后，单靠「写在后面」赢不了 —— 这里挂**三枚**
      假 id 把这条顶到 (4,1,2)，哪张表里都压得住。 */
html body #user-menu :is(.user-menu-main-card, .user-menu-surface-card):not(#glass-a):not(#glass-b):not(#glass-c) {
    background: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ── 第 1769 轮（需求）：「#user-menu（修改账号 / 账单查询 / 意见反馈这 3 个界面）里面的
   分类不要显示边框」──
   这三屏里的每一块「分类」都是 `.user-menu-surface-card`，而 ① 那份浮面清单给它们挂了
   1px 白边（`--gen-drawer-border`）—— 跟 `#user-menu` 自己的外圈同色，等于卡片外面又描
   了一道，叠在上一条「只留一层玻璃」的透明卡片上尤其显眼。这里把这三屏里的卡撤掉描边。
   ⚠️ 权重：① 那份清单实际是 (3,4,2) —— 除了两枚假 id，它后面还挂着
      `:not(.gen-drawer-panel-host *)` / `:not(.image-preview-studio-tools .image-preview-ai-popover)`
      两组类选择器；只凑到三枚 id 只是打平、类数不够仍然输（实测过）。
      这里挂**三枚**假 id，拿到 (4,1,2) 才压得住 ①，也压得住手机端那条没有 !important 的 `border: none`。
   输入框自己的 1px 细描边不在这条里，照旧。 */
html body :is(#user-menu-pane-account, #user-menu-pane-billing, #user-menu-pane-feedback) .user-menu-surface-card:not(#glass-a):not(#glass-b):not(#glass-c) {
    border: none !important;
}

/* 快捷生成卡片也跟随偏好设置里的全站玻璃面颜色与透明度。 */
html body :is(#stack-quick-gen-modal .stack-quick-gen-card):not(#glass-a):not(#glass-b):not(#glass-c) {
    background: var(--glass-surface-bg, #1e1e1e) !important;
    -webkit-backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
    backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
}

/* 第 1766 轮（需求）：「@div（添加预设）和 @div（编辑模块）界面也要改」——
   把上面那条玻璃覆盖扩到这两张（连同第 1765 轮的侵权举报），并统一成商品白底图那档
   24px 圆角 / 无阴影。⚠️ 不并进来是不行的：`html body .modal-card:not(...){background:
   var(--modal-card-bg,#fff)!important}` 那条会把玻璃底压回纯白，只写在各自文件里赢不了。 */
/* 第 1777 轮（需求）：「@div（.gen-anim-preview-card，动画预览那张）界面背景色 / 毛玻璃透明度
   要和 @div（商品白底图）一致」—— 同一档玻璃面，跟着并进这份清单。 */
html body :is(
        #stack-quick-gen-modal .stack-quick-gen-card,
        #quick-prompt-modal .modal-card-form,
        #image-set-module-modal .image-set-module-card,
        #infringement-report-modal .infringement-report-panel,
        #gen-animation-preview-modal .gen-anim-preview-card
    ):not(#glass-a):not(#glass-b):not(#glass-c) {
    background: var(--glass-surface-bg, #1e1e1e) !important;
    -webkit-backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
    backdrop-filter: var(--glass-filter, blur(10px) saturate(1.5)) !important;
    border-radius: 24px;
    box-shadow: none !important;
}