/* One four-image collage presentation is shared by drafts and posted messages.
   Geometry and gesture ownership belong to collageMessage; these rules only paint. */
.message-image-row {
    position: relative; display: block; width: 100%; min-width: 0; max-width: 100%;
    padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none;
}
.message-image-row > :is(.draft-image,.asset-frame) {
    position: absolute; margin: 0; min-width: 0; min-height: 0; max-width: none;
    padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none;
}
.message-image-row > .asset-frame { overflow: hidden; }
.message-image-row > .draft-image { overflow: visible; }
.message-image-row .draft-image > :is(img,.asset-frame),
.message-image-row > .asset-frame > .asset-image,
.message-image-row .draft-image .asset-image {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    min-height: 0; max-width: none; border: 0; border-radius: 8px;
    object-fit: contain; background: transparent; box-shadow: none;
}
.draft-image {
    position: relative; flex: 0 0 auto; height: auto; padding: 0;
    border: 0; background: transparent; box-shadow: none;
}
.draft-image-status {
    display: block; margin-top: 2px; font-size: 10px; line-height: 14px;
    white-space: nowrap; color: var(--muted);
}
.message-image-row .draft-image-status {
    position: absolute; top: 100%; left: 0; z-index: 2; margin-top: 2px;
}
.draft-image .image-status { padding: 8px; font-size: 9px; }

/* Images rest on the toolbar edge while the release region grows upward. */
.collage-drop-area {
    position: relative; width: 100%; max-width: 500px; min-width: 0; min-height: 0;
    flex: 0 0 auto; margin: 0; padding: 0; overflow: visible;
    border: 0; border-radius: 8px; background: transparent; box-shadow: none;
    outline: 0;
}
.collage-drop-area::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: var(--world-field-background, var(--surface)); opacity: 0; transition: opacity 150ms ease;
    pointer-events: none; z-index: 0;
}
.collage-drop-area.is-drop-active::before { opacity: .5; }
.collage-drop-area.is-dragging:has(> .attachment-tray:empty) { min-height: 112px; }
.collage-drop-area > .attachment-tray {
    position: absolute; inset: auto 0 0; width: 100%; min-width: 0; min-height: 0;
    margin: 0; padding: 0; display: block; overflow: visible; border: 0;
    border-radius: 0; background: transparent; box-shadow: none; z-index: 4;
    touch-action: pan-y;
}
.attachment-drop-preview {
    position: absolute; inset: auto 0 0; width: 100%; min-width: 0; margin: 0; padding: 0;
    overflow: visible; background: transparent; border: 0; box-shadow: none;
    pointer-events: none; z-index: 6;
}
.attachment-drop-slot {
    position: absolute; border: 0; outline: 0; border-radius: 8px;
    background: transparent; box-shadow: none; color: transparent; font-size: 0;
    pointer-events: none;
}

/* The host keeps the collage aligned with the posted message's media column. */
#app #bottom-bar .composer-context:has(.collage-drop-area:not([hidden])),
#app #bottom-bar .composer-context.attachment-drop-active {
    left: calc(var(--edge-space) + 34px + 13px);
    right: calc(var(--edge-space) + var(--scroll-width));
    max-height: none; overflow: visible;
}
@media (max-width: 760px) {
    #app #bottom-bar .composer-context:has(.collage-drop-area:not([hidden])),
    #app #bottom-bar .composer-context.attachment-drop-active {
        left: calc(var(--edge-space) + 34px + 10px);
    }
}

/* Removal controls are siblings of the artwork, so image scaling never scales them. */
.collage-image-controls {
    position: absolute; inset: 0; pointer-events: none; overflow: visible;
    transform: none; z-index: 30;
}
.collage-remove {
    position: absolute; display: grid; place-items: center; box-sizing: border-box;
    width: 22px; min-width: 22px; max-width: 22px;
    height: 22px; min-height: 22px; max-height: 22px;
    margin: 0; padding: 0; border: 0; border-radius: 50%;
    background: #fff; color: #333; font: 20px/20px Arial,sans-serif;
    text-align: center; text-transform: none; letter-spacing: normal;
    transform: none; box-shadow: none; pointer-events: auto;
}
.collage-remove:disabled { opacity: .45; cursor: default; }

/* Only the held artwork lifts. Logical layout bounds and other images stay put. */
.draft-image-reordering { z-index: 20; opacity: 1; transition: none; }
.attachment-tray.draft-reorder-active { z-index: 8; }
.message-image-row > .draft-image > :is(img,.asset-frame) {
    transform: none; transform-origin: var(--drag-anchor-x,50%) var(--drag-anchor-y,50%);
    transition: transform 100ms ease-out;
}
.message-image-row > .draft-image-reordering > :is(img,.asset-frame) { transform: scale(1.04); }
.message-image-row > .draft-image-reordering.is-snapped > :is(img,.asset-frame) { transform: none; }
/* Artwork is never a boxed selection, including after pointer release. */
#app .collage-drop-area .draft-image,
#app .collage-drop-area .draft-image :is(img,.asset-frame),
#app .collage-drop-area .draft-image:is(:focus,:focus-visible),
#app .collage-drop-area .draft-image :is(:focus,:focus-visible) {
    outline: none !important; box-shadow: none !important;
}
.attachment-preview-active > .draft-image { opacity: 1; }

/* The external held image escapes shell clipping and follows viewport coordinates. */
.attachment-drag-proxy {
    display: block; position: fixed; margin: 0; padding: 0; border: 0; border-radius: 8px;
    object-fit: contain; background: transparent; box-shadow: none; opacity: 1;
    pointer-events: none; user-select: none; z-index: 100; transform: scale(1.04);
    transform-origin: var(--drag-anchor-x,50%) var(--drag-anchor-y,50%);
    transition: transform 100ms ease-out;
}
.attachment-drag-proxy.is-snapped {
    transform: none; transition: left 140ms ease-out, top 140ms ease-out,
        width 140ms ease-out, height 140ms ease-out, transform 100ms ease-out;
}
.collage-removal-hint {
    position: fixed; margin: 0; padding: 0; border: 0; background: transparent;
    box-shadow: none; color: var(--muted); font-size: 11px; line-height: 16px;
    font-weight: 500; white-space: nowrap; opacity: 1; pointer-events: none;
    user-select: none; z-index: 101;
}
@media (prefers-reduced-motion: reduce) {
    .collage-drop-area::before { transition: none; }
    .message-image-row > .draft-image > :is(img,.asset-frame),
    .attachment-drag-proxy, .attachment-drag-proxy.is-snapped { transition: none; }
}

.collage-drop-area[hidden], .attachment-tray[hidden], .collage-removal-hint[hidden], .draft-image-status[hidden] { display: none !important; }