/* Required Notice: PhotoStack by Wren036 (https://github.com/Wren036/PhotoStack) */
@import url('../vendor/photo-stack/photo-stack.css');
.chat-photo-stack { width: fit-content; max-width: 100%; padding: 10px 24px 12px 4px; cursor: pointer; }
.chat-photo-stack:focus-visible { outline: 2px solid currentColor; border-radius: 16px; }
.chat-photo-stack .pstack-stage { max-width: 100%; }
/* Keep photos unframed; captions have their own text bubble. */
html body[data-page="chat"] .chat-messages .message-bubble:has(> .message-content > .chat-photo-stack) {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: var(--text-primary);
}
html body[data-page="chat"] .chat-messages .message-bubble:has(> .message-content > .chat-photo-stack) .message-meta {
    color: var(--text-muted);
}
html body[data-page="chat"] .chat-messages .message-bubble.user:has(> .message-content > .chat-photo-stack) .message-meta {
    justify-content: flex-end;
}
.chat-photo-stack:has(> .message-image) { padding: 0; }
.chat-photo-stack > .message-image { margin-top: 0; }
.message-image-caption {
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    margin-top: var(--spacing-sm, 8px);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.message-bubble.user > .message-content > .message-image-caption { margin-inline-start: auto; }
.message-bubble.assistant > .message-content > .message-image-caption { border-width: 1px; border-style: solid; }
.chat-photo-viewer { border: 0; padding: 16px; border-radius: 16px; color: #fff; background: #211e1c; max-width: 94vw; max-height: 94dvh; }
.chat-photo-viewer::backdrop { background: rgb(0 0 0 / 80%); }
.chat-photo-viewer > img { display: block; width: auto; height: auto; max-width: min(88vw, 1100px); max-height: 76dvh; object-fit: contain; margin: auto; }
.chat-photo-toolbar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.chat-photo-toolbar button { min-height: 44px; padding: 8px 12px; border-radius: 8px; border: 1px solid #82736a; background: #403832; color: inherit; cursor: pointer; }
.chat-photo-toolbar button:disabled { opacity: .4; cursor: default; }
@media (prefers-reduced-motion: reduce) { .chat-photo-stack .pstack-card { transition: none !important; } }