/* Fanxing AI — unified composer geometry and reference-stack motion.
   Loaded last so chat / image / video share one visual baseline. */

@media (min-width: 769px) {
    body.chat-shell.workspace-mode-chat .input-area,
    body.chat-shell.workspace-mode-image .input-area,
    body.chat-shell.workspace-mode-video .input-area {
        padding-right: 24px !important;
        padding-bottom: 28px !important;
        padding-left: 24px !important;
        transition: padding-bottom 420ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    body.chat-shell.workspace-mode-chat .chat-input-box,
    body.chat-shell.workspace-mode-image .chat-input-box,
    body.chat-shell.workspace-mode-video .chat-input-box,
    body.chat-shell.workspace-mode-image .chat-input-box.has-reference-stage,
    body.chat-shell.workspace-mode-video .chat-input-box.has-reference-stage,
    body.chat-shell.workspace-mode-video .input-container:has(.frame-upload-panel.visible) .chat-input-box {
        min-height: max(146px, calc(var(--composer-input-height, 84px) + 62px)) !important;
        transform-origin: center bottom;
        will-change: width, max-width, min-height, padding, border-radius, transform;
        transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1),
            max-width 420ms cubic-bezier(0.16, 1, 0.3, 1),
            min-height 420ms cubic-bezier(0.16, 1, 0.3, 1),
            padding 420ms cubic-bezier(0.16, 1, 0.3, 1),
            border-radius 360ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
            border-color 220ms ease, box-shadow 300ms ease !important;
    }

    body.chat-shell.workspace-mode-chat .chat-input-box .rich-input,
    body.chat-shell.workspace-mode-image .chat-input-box .rich-input,
    body.chat-shell.workspace-mode-video .chat-input-box .rich-input,
    body.chat-shell.workspace-mode-video .chat-input-box:not(.has-reference-stage) .rich-input.is-empty {
        height: var(--composer-input-height, 84px) !important;
        min-height: 76px !important;
        max-height: min(58vh, 420px) !important;
        transition: height 420ms cubic-bezier(0.16, 1, 0.3, 1),
            min-height 420ms cubic-bezier(0.16, 1, 0.3, 1),
            max-height 420ms cubic-bezier(0.16, 1, 0.3, 1),
            padding 420ms cubic-bezier(0.16, 1, 0.3, 1),
            font-size 300ms ease, line-height 300ms ease !important;
    }

    body.chat-shell.workspace-mode-image .chat-input-box.has-reference-stage .rich-input,
    body.chat-shell.workspace-mode-video .chat-input-box.has-reference-stage .rich-input {
        height: var(--composer-input-height, 84px) !important;
        min-height: 76px !important;
        max-height: min(58vh, 420px) !important;
        padding: 7px 8px 4px 104px !important;
    }

    body.chat-shell.workspace-mode-video .chat-input-box:has(> .frame-upload-panel.visible) > .rich-input {
        height: var(--composer-input-height, 84px) !important;
        min-height: 76px !important;
        max-height: min(58vh, 420px) !important;
        padding: 7px 8px 4px 162px !important;
    }
}

/* One reference stage for all three workspaces. */
body.chat-shell.workspace-mode-chat .reference-stage,
body.chat-shell.workspace-mode-image .reference-stage,
body.chat-shell.workspace-mode-video .reference-stage,
body.chat-shell.workspace-mode-chat .reference-stage.has-images,
body.chat-shell.workspace-mode-image .reference-stage.has-images,
body.chat-shell.workspace-mode-video .reference-stage.has-images {
    top: 12px !important;
    left: 12px !important;
    width: 82px;
    height: 88px !important;
    overflow: visible;
    contain: layout;
    transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1),
        height 420ms cubic-bezier(0.16, 1, 0.3, 1),
        top 420ms cubic-bezier(0.16, 1, 0.3, 1),
        left 420ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 220ms ease !important;
}

body.chat-shell.workspace-mode-chat .reference-stage:not(.has-images) .empty-reference-trigger,
body.chat-shell.workspace-mode-image .reference-stage:not(.has-images) .empty-reference-trigger,
body.chat-shell.workspace-mode-video .reference-stage:not(.has-images) .empty-reference-trigger {
    inset: 8px auto auto 13px !important;
    box-sizing: border-box;
    width: 52px !important;
    height: 68px !important;
    transform-origin: center center;
    transform: rotate(-7deg) scale(1) !important;
    will-change: transform;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 180ms ease, box-shadow 220ms ease, background 180ms ease !important;
}

body.chat-shell.workspace-mode-chat .reference-stage:not(.has-images) .empty-reference-trigger:hover,
body.chat-shell.workspace-mode-chat .reference-stage:not(.has-images) .empty-reference-trigger:focus-visible,
body.chat-shell.workspace-mode-image .reference-stage:not(.has-images) .empty-reference-trigger:hover,
body.chat-shell.workspace-mode-image .reference-stage:not(.has-images) .empty-reference-trigger:focus-visible,
body.chat-shell.workspace-mode-video .reference-stage:not(.has-images) .empty-reference-trigger:hover,
body.chat-shell.workspace-mode-video .reference-stage:not(.has-images) .empty-reference-trigger:focus-visible {
    transform: rotate(-7deg) scale(1.07) !important;
}

/* Uploaded references start as a compact, centered layered stack. */
body.chat-shell.workspace-mode-chat .reference-stage.has-images .empty-reference-trigger,
body.chat-shell.workspace-mode-image .reference-stage.has-images .empty-reference-trigger,
body.chat-shell.workspace-mode-video .reference-stage.has-images .empty-reference-trigger {
    display: none !important;
}

body.chat-shell.workspace-mode-chat .reference-stage.has-images .preview-area,
body.chat-shell.workspace-mode-image .reference-stage.has-images .preview-area,
body.chat-shell.workspace-mode-video .reference-stage.has-images .preview-area {
    position: absolute;
    inset: 0 !important;
    display: block;
    width: 82px;
    height: 88px;
    padding: 0;
    overflow: visible;
    pointer-events: none;
    transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.chat-shell.workspace-mode-chat .reference-stage.has-images .preview-item,
body.chat-shell.workspace-mode-image .reference-stage.has-images .preview-item,
body.chat-shell.workspace-mode-video .reference-stage.has-images .preview-item,
body.chat-shell.workspace-mode-chat .reference-stage.has-images .preview-item-file {
    top: 9px !important;
    left: 12px !important;
    box-sizing: border-box;
    width: 48px !important;
    height: 63px !important;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.94) !important;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
    /* Every layer rotates around the same center point. */
    transform-origin: 50% 50%;
    will-change: transform;
    pointer-events: auto;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 240ms ease, border-color 180ms ease, box-shadow 300ms ease,
        filter 160ms ease !important;
}

body.theme-light.chat-shell.workspace-mode-chat .reference-stage.has-images .preview-item,
body.theme-light.chat-shell.workspace-mode-image .reference-stage.has-images .preview-item,
body.theme-light.chat-shell.workspace-mode-video .reference-stage.has-images .preview-item {
    border-color: rgba(255, 255, 255, 0.96) !important;
    background: #fff;
    box-shadow: 0 4px 12px rgba(38, 42, 55, 0.18);
}

body.chat-shell .reference-stage.has-images .preview-item img,
body.chat-shell .reference-stage.has-images .preview-item video,
body.chat-shell .reference-stage.has-images .video-thumbnail-placeholder {
    border-radius: 6px;
}

/* Stacked cards: fixed center, small offsets, and a clear front layer. */
body.chat-shell .reference-stage.has-images:not(.is-expanded) .preview-item[style*="--stack-index:0"] {
    --card-x: -8px;
    --card-y: 7px;
    --card-rotate: -10deg;
    --card-scale: .94;
}

body.chat-shell .reference-stage.has-images:not(.is-expanded) .preview-item[style*="--stack-index:1"] {
    --card-x: -4px;
    --card-y: 3px;
    --card-rotate: -6deg;
    --card-scale: .97;
}

body.chat-shell .reference-stage.has-images:not(.is-expanded) .preview-item[style*="--stack-index:2"] {
    --card-x: -5px;
    --card-y: 0px;
    --card-rotate: -3deg;
    --card-scale: .98;
}

body.chat-shell .reference-stage.has-images:not(.is-expanded) .preview-item[style*="--stack-index:3"] {
    --card-x: 6px;
    --card-y: 3px;
    --card-rotate: 6deg;
    --card-scale: .97;
}

body.chat-shell .reference-stage.has-images:not(.is-expanded) .preview-item[style*="--stack-index:4"] {
    --card-x: 0px;
    --card-y: 6px;
    --card-rotate: 0deg;
    --card-scale: 1;
}

body.chat-shell .reference-stage.has-images:not(.is-expanded) .empty-reference-trigger {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.chat-shell.workspace-mode-chat .reference-stage.has-images .preview-item,
body.chat-shell.workspace-mode-image .reference-stage.has-images .preview-item,
body.chat-shell.workspace-mode-video .reference-stage.has-images .preview-item {
    transform: translate(var(--card-x), var(--card-y)) rotate(var(--card-rotate)) scale(var(--card-scale, 1)) !important;
}

body.chat-shell.workspace-mode-chat .reference-stage.is-expanded,
body.chat-shell.workspace-mode-image .reference-stage.is-expanded,
body.chat-shell.workspace-mode-video .reference-stage.is-expanded {
    width: calc(var(--expanded-items, 2) * 44px + 54px) !important;
    contain: none;
}

body.chat-shell.workspace-mode-chat .reference-stage.is-expanded .preview-area,
body.chat-shell.workspace-mode-image .reference-stage.is-expanded .preview-area,
body.chat-shell.workspace-mode-video .reference-stage.is-expanded .preview-area {
    width: 100% !important;
    height: 100%;
    padding-right: 18px;
}

body.chat-shell .reference-stage.is-expanded .preview-item {
    --card-x: calc(var(--real-index) * 44px);
    --card-y: 6px;
    --card-rotate: -5deg;
    opacity: 1;
    pointer-events: auto;
}

body.chat-shell .reference-stage.is-expanded .preview-item:nth-child(4n + 2) {
    --card-y: 2px;
    --card-rotate: 4deg;
}

body.chat-shell .reference-stage.is-expanded .preview-item:nth-child(4n + 3) {
    --card-y: 5px;
    --card-rotate: -2deg;
}

body.chat-shell .reference-stage.is-expanded .preview-item:nth-child(4n) {
    --card-y: 3px;
    --card-rotate: 4deg;
}

body.chat-shell .reference-stage .more-imgs-overlay {
    display: none !important;
}

body.chat-shell .reference-stage.has-images:not(.is-expanded) .preview-item-add:not(.preview-item-library) {
    display: flex !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.chat-shell .reference-stage.has-images:not(.is-expanded) .preview-item-library {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.chat-shell.workspace-mode-chat .reference-stage.is-expanded .preview-item-add,
body.chat-shell.workspace-mode-image .reference-stage.is-expanded .preview-item-add,
body.chat-shell.workspace-mode-video .reference-stage.is-expanded .preview-item-add {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.chat-shell .reference-stage.has-images .preview-floating-name,
body.chat-shell .reference-stage.has-images .preview-name,
body.chat-shell .reference-stage.has-images .media-name-ref {
    display: none !important;
}

body.chat-shell.workspace-mode-chat .reference-stage.has-images .preview-remove,
body.chat-shell.workspace-mode-image .reference-stage.has-images .preview-remove,
body.chat-shell.workspace-mode-video .reference-stage.has-images .preview-remove {
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 160ms ease, background 160ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.chat-shell .reference-stage.has-images .preview-item:hover {
    transform: translate(var(--card-x), var(--card-y)) rotate(var(--card-rotate)) scale(1.16) !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34) !important;
    z-index: 100 !important;
}

body.theme-light.chat-shell .reference-stage.has-images .preview-item:hover {
    border-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 16px 30px rgba(38, 42, 55, 0.22) !important;
}

body.chat-shell .reference-stage.has-images .preview-item:hover .preview-remove {
    opacity: 1;
}

/* Scrolling away from the latest message produces a real compact composer.
   All geometry transitions use the same easing so there is no one-frame jump. */
@media (min-width: 769px) {
    body.chat-shell.workspace-mode-chat .input-area.composer-collapsed,
    body.chat-shell.workspace-mode-image .input-area.composer-collapsed,
    body.chat-shell.workspace-mode-video .input-area.composer-collapsed {
        padding-bottom: 14px !important;
    }

    body.chat-shell.workspace-mode-chat .chat-input-box.composer-collapsed,
    body.chat-shell.workspace-mode-image .chat-input-box.composer-collapsed,
    body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed,
    body.chat-shell.workspace-mode-video .input-container:has(.frame-upload-panel.visible) .chat-input-box.composer-collapsed {
        width: min(620px, 100%) !important;
        max-width: 620px !important;
        min-height: 72px !important;
        height: auto !important;
        padding: 0 !important;
        border-radius: 22px !important;
        overflow: hidden;
        transform: translateY(-4px);
    }

    body.chat-shell.workspace-mode-chat .chat-input-box.composer-collapsed .rich-input,
    body.chat-shell.workspace-mode-image .chat-input-box.composer-collapsed .rich-input,
    body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed .rich-input,
    body.chat-shell.workspace-mode-image .chat-input-box.composer-collapsed.has-reference-stage .rich-input,
    body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed.has-reference-stage .rich-input,
    body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed:has(> .frame-upload-panel.visible) > .rich-input {
        box-sizing: border-box;
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        padding: 0 72px 0 88px !important;
        overflow: hidden !important;
        white-space: nowrap;
        font-size: 14px;
        line-height: 70px !important;
    }

    body.chat-shell.workspace-mode-chat .chat-input-box.composer-collapsed .reference-stage,
    body.chat-shell.workspace-mode-image .chat-input-box.composer-collapsed .reference-stage,
    body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed .reference-stage {
        display: block !important;
        top: 4px !important;
        left: 8px !important;
        width: 72px !important;
        height: 62px !important;
        contain: layout;
        transform: scale(0.86);
        transform-origin: left center;
        opacity: 0.96;
    }

    body.chat-shell .chat-input-box.composer-collapsed .reference-stage:not(.has-images) .empty-reference-trigger {
        inset: 1px auto auto 8px !important;
        width: 44px !important;
        height: 56px !important;
        transform: rotate(-6deg) scale(1) !important;
    }

    body.chat-shell .chat-input-box.composer-collapsed .reference-stage.has-images .preview-item {
        top: 1px !important;
        left: 8px !important;
        width: 44px !important;
        height: 57px !important;
    }

    body.chat-shell .chat-input-box.composer-collapsed .reference-stage .preview-item[style*="--stack-index:0"] {
        --card-x: -6px;
        --card-y: 6px;
        --card-rotate: -10deg;
        --card-scale: .94;
    }

    body.chat-shell .chat-input-box.composer-collapsed .reference-stage .preview-item[style*="--stack-index:1"] {
        --card-x: -3px;
        --card-y: 3px;
        --card-rotate: -6deg;
        --card-scale: .97;
    }

    body.chat-shell .chat-input-box.composer-collapsed .reference-stage .preview-item[style*="--stack-index:2"] {
        --card-x: -4px;
        --card-y: 0px;
        --card-rotate: -3deg;
        --card-scale: .98;
    }

    body.chat-shell .chat-input-box.composer-collapsed .reference-stage .preview-item[style*="--stack-index:3"] {
        --card-x: 5px;
        --card-y: 3px;
        --card-rotate: 6deg;
        --card-scale: .97;
    }

    body.chat-shell .chat-input-box.composer-collapsed .reference-stage .preview-item[style*="--stack-index:4"] {
        --card-x: 0px;
        --card-y: 6px;
        --card-rotate: 0deg;
        --card-scale: 1;
    }

    body.chat-shell .chat-input-box.composer-collapsed .reference-stage .preview-item-library,
    body.chat-shell .chat-input-box.composer-collapsed .reference-stage .preview-floating-name,
    body.chat-shell .chat-input-box.composer-collapsed .reference-stage .preview-remove {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.chat-shell .chat-input-box.composer-collapsed .reference-stage.has-images .preview-item-add:not(.preview-item-library) {
        display: none !important;
    }

    body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed > .frame-upload-panel.visible,
    body.chat-shell.workspace-mode-video .input-area.composer-collapsed .frame-upload-panel.visible {
        display: grid !important;
        inset: 9px auto auto 14px !important;
        width: 86px !important;
        height: 54px !important;
        grid-template-columns: 38px 10px 38px !important;
        transform: none;
        opacity: 0.96;
        transition: inset 420ms cubic-bezier(0.16, 1, 0.3, 1),
            width 420ms cubic-bezier(0.16, 1, 0.3, 1),
            height 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease !important;
    }

    body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed > .frame-upload-panel.visible .frame-slot {
        width: 38px !important;
        height: 52px !important;
    }

    body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed:has(> .frame-upload-panel.visible) > .rich-input {
        padding-left: 112px !important;
    }
}

/* First / last frame cards use the same 52 × 68 base card and the same
   stationary scale interaction as the generic reference placeholder. */
@media (min-width: 769px) {
    body.chat-shell.workspace-mode-video .chat-input-box > .frame-upload-panel.visible {
        inset: 18px auto auto 24px !important;
        width: 120px !important;
        height: 70px !important;
        grid-template-columns: 52px 16px 52px !important;
    }

    body.chat-shell.workspace-mode-video .chat-input-box > .frame-upload-panel.visible .frame-slot {
        width: 52px !important;
        height: 68px !important;
        transform-origin: center center;
        will-change: transform;
        transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
            border-color 180ms ease, box-shadow 220ms ease, background 180ms ease !important;
    }

    body.chat-shell.workspace-mode-video .chat-input-box > .frame-upload-panel.visible .frame-slot:first-child,
    body.chat-shell.workspace-mode-video .chat-input-box > .frame-upload-panel.visible .frame-slot:first-child:hover {
        transform: rotate(-5deg) scale(1) !important;
    }

    body.chat-shell.workspace-mode-video .chat-input-box > .frame-upload-panel.visible .frame-slot:last-child,
    body.chat-shell.workspace-mode-video .chat-input-box > .frame-upload-panel.visible .frame-slot:last-child:hover {
        transform: rotate(4deg) scale(1) !important;
    }

    body.chat-shell.workspace-mode-video .chat-input-box > .frame-upload-panel.visible .frame-slot:first-child:hover {
        transform: rotate(-5deg) scale(1.06) !important;
    }

    body.chat-shell.workspace-mode-video .chat-input-box > .frame-upload-panel.visible .frame-slot:last-child:hover {
        transform: rotate(4deg) scale(1.06) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.chat-shell .reference-stage,
    body.chat-shell .reference-stage .preview-area,
    body.chat-shell .reference-stage .preview-item,
    body.chat-shell .reference-stage .empty-reference-trigger,
    body.chat-shell.workspace-mode-video .frame-upload-panel.visible .frame-slot {
        transition-duration: 0.01ms !important;
    }
}

/* 末尾入口卡与照片缩略图是两类东西：入口卡使用实心表面、明确文字，
   不参与照片卡的白底与缩略图视觉，也不再继承主题文字颜色。 */
body.chat-shell.workspace-mode-chat .reference-stage.has-images .preview-action-card,
body.chat-shell.workspace-mode-image .reference-stage.has-images .preview-action-card,
body.chat-shell.workspace-mode-video .reference-stage.has-images .preview-action-card {
    z-index: 40 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: #2a2c36 !important;
    color: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 240ms ease, visibility 0s linear 0s, background 180ms ease,
        border-color 180ms ease, color 180ms ease !important;
}

body.chat-shell .reference-stage.has-images .preview-action-card .empty-reference-content,
body.chat-shell .reference-stage.has-images .preview-action-card .empty-reference-content span,
body.chat-shell .reference-stage.has-images .preview-action-card .empty-reference-icon,
body.chat-shell .reference-stage.has-images .preview-action-card .empty-reference-icon svg {
    color: inherit !important;
}

body.chat-shell .reference-stage.has-images .preview-action-card .empty-reference-content {
    gap: 4px;
}

body.chat-shell .reference-stage.has-images .preview-action-card .empty-reference-content span {
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
}

body.chat-shell .reference-stage.is-expanded .preview-action-card {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.chat-shell .reference-stage.is-expanded .preview-action-card.preview-item-add {
    transition-delay: 70ms !important;
}

body.chat-shell .reference-stage.is-expanded .preview-action-card.preview-item-library {
    transition-delay: 140ms !important;
}

body.chat-shell .reference-stage.has-images .preview-action-card:hover {
    border-color: rgba(157, 146, 255, 0.82) !important;
    background: #343741 !important;
    color: #ffffff !important;
}

body.theme-light.chat-shell .reference-stage.has-images .preview-action-card {
    border-color: rgba(17, 24, 39, 0.13) !important;
    background: #ffffff !important;
    color: rgba(29, 27, 46, 0.68) !important;
    box-shadow: 0 7px 16px rgba(48, 40, 104, 0.12) !important;
}

body.theme-light.chat-shell .reference-stage.has-images .preview-action-card:hover {
    border-color: rgba(111, 88, 230, 0.70) !important;
    background: #f8f7ff !important;
    color: #5645c9 !important;
}

body.chat-shell .reference-stage.has-images .preview-card-entering {
    opacity: 0 !important;
    transform: translate(calc(var(--card-x) - 54px), calc(var(--card-y) + 8px)) rotate(var(--card-rotate)) scale(0.94) !important;
}

/*
 * Reference cards use a compact, centered pile rather than a fan.
 * The geometry mirrors the small standalone stack prototype: all cards share
 * one center, while the five layers get only a small offset and rotation.
 * Keep this block last so it wins over the older composer/fan rules above.
 */
body.chat-shell .reference-stage.has-images,
body.chat-shell .reference-stage.has-images.is-expanded {
    top: 8px !important;
    left: 8px !important;
    width: 88px !important;
    height: 96px !important;
    overflow: visible !important;
    contain: layout !important;
}

body.chat-shell .reference-stage.has-images .preview-area,
body.chat-shell .reference-stage.has-images.is-expanded .preview-area {
    position: absolute !important;
    inset: auto !important;
    top: 7px !important;
    left: 7px !important;
    width: 74px !important;
    height: 82px !important;
    padding: 0 !important;
    overflow: visible !important;
    display: block !important;
    pointer-events: none !important;
}

body.chat-shell .reference-stage.has-images .preview-item:not(.preview-action-card),
body.chat-shell .reference-stage.has-images.is-expanded .preview-item:not(.preview-action-card) {
    position: absolute !important;
    /* Keep one fixed origin in both states.  Only transform changes on hover,
       so the pile never jumps when it starts opening to the right. */
    top: 41px !important;
    left: 37px !important;
    width: 58px !important;
    height: 70px !important;
    min-width: 58px !important;
    min-height: 70px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: 2px solid rgba(255, 255, 255, 0.96) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    transform-origin: center center !important;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 220ms ease, border-color 180ms ease, box-shadow 220ms ease !important;
    pointer-events: auto !important;
}

body.chat-shell .reference-stage.has-images .preview-item:not(.preview-action-card) img,
body.chat-shell .reference-stage.has-images .preview-item:not(.preview-action-card) video,
body.chat-shell .reference-stage.has-images .preview-item:not(.preview-action-card) .video-thumbnail-placeholder,
body.chat-shell .reference-stage.has-images.is-expanded .preview-item:not(.preview-action-card) img,
body.chat-shell .reference-stage.has-images.is-expanded .preview-item:not(.preview-action-card) video,
body.chat-shell .reference-stage.has-images.is-expanded .preview-item:not(.preview-action-card) .video-thumbnail-placeholder {
    width: 100% !important;
    height: 100% !important;
    border-radius: 6px !important;
    object-fit: cover;
}

/* Five layers, from the back card (0) to the front card (4). */
body.chat-shell .reference-stage.has-images .preview-item[style*="--stack-index:0"] {
    --stack-transform: translate(-61%, -48%) rotate(-14deg);
    --card-rotate: -14deg;
}

body.chat-shell .reference-stage.has-images .preview-item[style*="--stack-index:1"] {
    --stack-transform: translate(-39%, -49%) rotate(11deg);
    --card-rotate: 7deg;
}

body.chat-shell .reference-stage.has-images .preview-item[style*="--stack-index:2"] {
    --stack-transform: translate(-57%, -56%) rotate(-7deg);
    --card-rotate: -3deg;
}

body.chat-shell .reference-stage.has-images .preview-item[style*="--stack-index:3"] {
    --stack-transform: translate(-43%, -55%) rotate(6deg);
    --card-rotate: 6deg;
}

body.chat-shell .reference-stage.has-images .preview-item[style*="--stack-index:4"] {
    --stack-transform: translate(-50%, -50%) rotate(0deg);
    --card-rotate: 0deg;
}

body.chat-shell .reference-stage.has-images .preview-item:not(.preview-action-card),
body.chat-shell .reference-stage.has-images.is-expanded .preview-item:not(.preview-action-card) {
    transform: var(--stack-transform) !important;
}

body.chat-shell .reference-stage.has-images .preview-item:not(.preview-action-card):hover {
    transform: var(--stack-transform) scale(1.06) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.32) !important;
    z-index: 100 !important;
}

/* The requested visual has no floating plus/add card once references exist. */
body.chat-shell .reference-stage.has-images .empty-reference-trigger,
body.chat-shell .reference-stage.has-images .preview-action-card {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Keep the same pile in the compact composer, but anchor it to the vertical
   center of the short input.  The old top:4px rule positioned the tray from
   the top edge while its cards were still laid out as an 82px stack, which
   is why the reference image escaped into the upper-left corner after the
   history panel compacted the composer. */
body.chat-shell .chat-input-box.composer-collapsed .reference-stage.has-images,
body.chat-shell .chat-input-box.composer-collapsed .reference-stage.has-images.is-expanded {
    top: 50% !important;
    left: 12px !important;
    width: 88px !important;
    height: 82px !important;
    transform: translateY(-50%) scale(0.82) !important;
    transform-origin: left center !important;
}

body.chat-shell .chat-input-box.composer-collapsed .reference-stage.has-images .preview-area,
body.chat-shell .chat-input-box.composer-collapsed .reference-stage.has-images.is-expanded .preview-area {
    top: 0 !important;
    left: 0 !important;
    width: 74px !important;
    height: 82px !important;
    transform: none !important;
}

body.chat-shell .chat-input-box.composer-collapsed .reference-stage.has-images .preview-item:not(.preview-action-card),
body.chat-shell .chat-input-box.composer-collapsed .reference-stage.has-images.is-expanded .preview-item:not(.preview-action-card) {
    width: 58px !important;
    height: 70px !important;
    min-width: 58px !important;
    min-height: 70px !important;
}

/*
 * Hover state: unfold the pile into a slow, angled row.  The compact state
 * above remains unchanged until app-model.js adds .is-expanded on mouseenter.
 * --real-index is emitted by app-upload.js for every media card and for the
 * trailing upload/library cards, so older references also appear in order.
 */
body.chat-shell .reference-stage.has-images.is-expanded {
    /* Keep the original pile's anchor fixed; only the right edge grows. */
    top: 8px !important;
    left: 8px !important;
    width: calc(var(--expanded-items, var(--total-imgs, 1)) * 56px + 20px) !important;
    height: 96px !important;
    contain: none !important;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-area {
    top: 7px !important;
    left: 7px !important;
    width: calc(var(--expanded-items, var(--total-imgs, 1)) * 56px + 20px) !important;
    height: 82px !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    transition: width 760ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-item:not(.preview-action-card) {
    top: 41px !important;
    left: 37px !important;
    width: 58px !important;
    height: 70px !important;
    min-width: 58px !important;
    min-height: 70px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(calc(-50% + var(--expanded-track-index) * 56px), calc(-50% + var(--expanded-y, 0px))) rotate(var(--expanded-rotate, -4deg)) !important;
    transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 260ms ease, border-color 180ms ease, box-shadow 220ms ease !important;
    transition-delay: 0ms !important;
}

/* A loose but controlled angle rhythm, matching the supplied reference. */
body.chat-shell .reference-stage.has-images.is-expanded .preview-item[style*="--expanded-track-index:0"] {
    --expanded-y: 0px;
    --expanded-rotate: -10deg;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-item[style*="--expanded-track-index:1"] {
    --expanded-y: 0px;
    --expanded-rotate: -5deg;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-item[style*="--expanded-track-index:2"] {
    --expanded-y: 0px;
    --expanded-rotate: 4deg;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-item[style*="--expanded-track-index:3"] {
    --expanded-y: 0px;
    --expanded-rotate: -4deg;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-item[style*="--expanded-track-index:4"] {
    --expanded-y: 0px;
    --expanded-rotate: 6deg;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-item[style*="--expanded-track-index:5"] {
    --expanded-y: 0px;
    --expanded-rotate: -7deg;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-item[style*="--expanded-track-index:6"] {
    --expanded-y: 0px;
    --expanded-rotate: 5deg;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-item[style*="--expanded-track-index:7"] {
    --expanded-y: 0px;
    --expanded-rotate: -3deg;
}

/* Upload/material-library cards are dark placeholders at the end of the row. */
body.chat-shell .reference-stage.has-images.is-expanded .preview-action-card {
    display: flex !important;
    position: absolute !important;
    top: 41px !important;
    left: 37px !important;
    width: 58px !important;
    height: 70px !important;
    min-width: 58px !important;
    min-height: 70px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 60 !important;
    transform: translate(calc(-50% + var(--expanded-track-index) * 56px), calc(-50% + var(--expanded-y, 0px))) rotate(var(--expanded-rotate, 0deg)) !important;
    transition: transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 260ms ease, background 180ms ease, border-color 180ms ease !important;
    transition-delay: 0ms !important;
}

/* Both trailing action cards use exactly the same origin and horizontal
   track as the reference cards.  This explicit entering-state override also
   protects against a stale DOM node that was created by an older render. */
body.chat-shell .reference-stage.has-images.is-expanded
    .preview-action-card.preview-card-entering,
body.chat-shell .reference-stage.has-images.is-expanded
    .preview-action-card.preview-card-entering:hover {
    top: 41px !important;
    left: 37px !important;
    width: 58px !important;
    height: 70px !important;
    min-width: 58px !important;
    min-height: 70px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(
        calc(-50% + var(--expanded-track-index) * 56px),
        calc(-50% + var(--expanded-y, 0px))
    ) rotate(var(--expanded-rotate, 0deg)) !important;
    transition-delay: 0ms !important;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-action-card.preview-item-add {
    --expanded-y: 0px;
    --expanded-rotate: -2deg;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-action-card.preview-item-library {
    --expanded-y: 0px;
    --expanded-rotate: 5deg;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-action-card:hover {
    /* Keep action cards on their expanded track; the generic card hover rule
       must not pull them back toward the compact pile. */
    transform: translate(calc(-50% + var(--expanded-track-index) * 56px), calc(-50% + var(--expanded-y, 0px) - 3px)) rotate(var(--expanded-rotate, 0deg)) scale(1.04) !important;
    z-index: 120 !important;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-action-card .empty-reference-content {
    gap: 5px !important;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-action-card .empty-reference-content span {
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px !important;
    line-height: 1.1 !important;
}

/* Compact mode keeps the two action cards at the same invisible origin as the
   pile.  They can therefore animate out along the same rightward track when
   the stage opens, instead of appearing from below (or jumping to the end). */
body.chat-shell .reference-stage.has-images:not(.is-expanded) .preview-action-card {
    display: flex !important;
    position: absolute !important;
    top: 41px !important;
    left: 37px !important;
    width: 58px !important;
    height: 70px !important;
    min-width: 58px !important;
    min-height: 70px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.chat-shell .reference-stage.has-images:not(.is-expanded) .empty-reference-trigger {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.chat-shell .reference-stage.has-images:not(.is-expanded) .preview-action-card {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.96) !important;
    transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 220ms ease, visibility 0s linear 220ms, background 180ms ease,
        border-color 180ms ease !important;
}

/* Returning to the pile is immediate and clean; no delayed card can linger
   after the pointer leaves the tray. */
body.chat-shell .reference-stage.has-images:not(.is-expanded) .preview-item:not(.preview-action-card) {
    transition-delay: 0ms !important;
}

/* Old cards remain genuinely hidden rather than being painted as ghosts when
   the tray opens. */
body.chat-shell .reference-stage.has-images .preview-item.is-stack-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-item.is-stack-hidden {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Hovering a card in the open row lifts that same card; it never falls back
   to the compact pile transform, which was the source of the old residue. */
body.chat-shell .reference-stage.has-images.is-expanded .preview-item:not(.preview-action-card):not(.is-stack-hidden):hover {
    transform: translate(calc(-50% + var(--expanded-track-index) * 56px), calc(-50% + var(--expanded-y, 0px) - 12px)) rotate(var(--expanded-rotate, -4deg)) scale(1.14) !important;
    z-index: 120 !important;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.38) !important;
    filter: saturate(1.06) !important;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-item:not(.preview-action-card):not(.is-stack-hidden):hover .preview-floating-name {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) rotate(4deg) !important;
}

/* In the compact pile, the pointer is necessarily over several overlapping
   cards at once.  Do not let each card's generic :hover rule change its
   transform/z-index; that feedback loop is what caused the flashing ghosts. */
body.chat-shell .reference-stage.has-images:not(.is-expanded) .preview-item:not(.preview-action-card):hover {
    transform: var(--stack-transform) !important;
    z-index: auto !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    filter: none !important;
}

body.chat-shell .reference-stage.has-images:not(.is-expanded) .preview-item:not(.preview-action-card) .preview-remove {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* During the opening gesture the stage itself owns the pointer. The
   overlapping child hitboxes stay inert until the row has opened, preventing
   the pointer from hopping between cards and producing a flashing afterimage. */
body.chat-shell .reference-stage.has-images:not(.is-expanded) .preview-item:not(.preview-action-card) {
    pointer-events: none !important;
}

body.chat-shell .reference-stage.has-images {
    pointer-events: auto !important;
}

body.chat-shell .reference-stage.has-images.is-expanded .preview-item:not(.is-stack-hidden) {
    pointer-events: auto !important;
}

/* The compact rules above live in a desktop media block and the legacy
   stylesheet also has a more specific 1px/44px card rule.  Keep this final
   mode-specific pass last so the compact stack uses the same centered
   58x70 geometry in every workspace instead of being pulled to the corner. */
body.chat-shell.workspace-mode-chat .chat-input-box.composer-collapsed .reference-stage.has-images,
body.chat-shell.workspace-mode-image .chat-input-box.composer-collapsed .reference-stage.has-images,
body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed .reference-stage.has-images,
body.chat-shell.workspace-mode-chat .chat-input-box.composer-collapsed .reference-stage.has-images.is-expanded,
body.chat-shell.workspace-mode-image .chat-input-box.composer-collapsed .reference-stage.has-images.is-expanded,
body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed .reference-stage.has-images.is-expanded {
    top: 50% !important;
    left: 12px !important;
    width: 88px !important;
    height: 82px !important;
    transform: translateY(-50%) scale(0.82) !important;
    transform-origin: left center !important;
}

body.chat-shell.workspace-mode-chat .chat-input-box.composer-collapsed .reference-stage.has-images .preview-area,
body.chat-shell.workspace-mode-image .chat-input-box.composer-collapsed .reference-stage.has-images .preview-area,
body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed .reference-stage.has-images .preview-area,
body.chat-shell.workspace-mode-chat .chat-input-box.composer-collapsed .reference-stage.has-images.is-expanded .preview-area,
body.chat-shell.workspace-mode-image .chat-input-box.composer-collapsed .reference-stage.has-images.is-expanded .preview-area,
body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed .reference-stage.has-images.is-expanded .preview-area {
    top: 0 !important;
    left: 0 !important;
    width: 74px !important;
    height: 82px !important;
    transform: none !important;
}

body.chat-shell.workspace-mode-chat .chat-input-box.composer-collapsed .reference-stage.has-images .preview-item:not(.preview-action-card),
body.chat-shell.workspace-mode-image .chat-input-box.composer-collapsed .reference-stage.has-images .preview-item:not(.preview-action-card),
body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed .reference-stage.has-images .preview-item:not(.preview-action-card) {
    top: 41px !important;
    left: 37px !important;
    width: 58px !important;
    height: 70px !important;
    min-width: 58px !important;
    min-height: 70px !important;
}

/* Keep the upload card in the DOM (invisible while compact) so it also has
   a real starting point for the rightward animation; the old rule used
   display:none and caused it to pop into the row. */
body.chat-shell.workspace-mode-chat .chat-input-box.composer-collapsed .reference-stage.has-images .preview-item-add:not(.preview-item-library),
body.chat-shell.workspace-mode-image .chat-input-box.composer-collapsed .reference-stage.has-images .preview-item-add:not(.preview-item-library),
body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed .reference-stage.has-images .preview-item-add:not(.preview-item-library) {
    display: flex !important;
}

body.chat-shell.workspace-mode-chat .chat-input-box.composer-collapsed .reference-stage.has-images .preview-action-card,
body.chat-shell.workspace-mode-image .chat-input-box.composer-collapsed .reference-stage.has-images .preview-action-card,
body.chat-shell.workspace-mode-video .chat-input-box.composer-collapsed .reference-stage.has-images .preview-action-card {
    top: 41px !important;
    left: 37px !important;
    width: 58px !important;
    height: 70px !important;
    min-width: 58px !important;
    min-height: 70px !important;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.96) !important;
}

/* Keep the non-expanded tray on the exact same anchor as the expanded tray.
   The older workspace rule used top:12px/height:88px while the expanded row
   used top:8px/height:96px.  Entering from the top or bottom then moved the
   hit area under the cursor, causing leave/enter flicker and a jumpy opening. */
body.chat-shell.workspace-mode-chat .reference-stage.has-images:not(.is-expanded),
body.chat-shell.workspace-mode-image .reference-stage.has-images:not(.is-expanded),
body.chat-shell.workspace-mode-video .reference-stage.has-images:not(.is-expanded) {
    top: 8px !important;
    left: 8px !important;
    width: 88px !important;
    height: 96px !important;
}

/* Keep the compact normal composer on the same inner origin as the expanded
   row.  Without this, the older workspace rule's inset:0 wins by specificity
   and the entire pile drops 7px when the pointer opens it. */
body.chat-shell.workspace-mode-chat .chat-input-box:not(.composer-collapsed) .reference-stage.has-images:not(.is-expanded) .preview-area,
body.chat-shell.workspace-mode-image .chat-input-box:not(.composer-collapsed) .reference-stage.has-images:not(.is-expanded) .preview-area,
body.chat-shell.workspace-mode-video .chat-input-box:not(.composer-collapsed) .reference-stage.has-images:not(.is-expanded) .preview-area {
    top: 7px !important;
    left: 7px !important;
}


/* Keep the conversation composer width aligned with the image and video workspaces. */
body.chat-shell.workspace-mode-chat .input-container {
    width: min(980px, calc(100% - 48px));
    max-width: 980px;
}

body.chat-shell.workspace-mode-chat .chat-input-box {
    max-width: 980px;
}

@media (max-width: 820px) {
    body.chat-shell.workspace-mode-chat .input-container {
        width: calc(100% - 24px);
    }
}