/* Loaded last: content previews must not stretch with long adjacent post text. */
html body .feed-post { --content-photo-height: 320px; }
html body .feed-post > .feed-photo-identification {
  align-self: start !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: var(--content-photo-height);
  overflow: hidden;
}
html body .feed-post:not(.post-is-editing) img.feed-post-image,
html body .feed-post:not(.post-is-editing) .feed-photo-identification > img.feed-post-image.post-banner {
  position: static !important;
  width: 100%;
  height: auto !important;
  max-height: var(--content-photo-height) !important;
  aspect-ratio: var(--content-photo-ratio, auto) !important;
  object-fit: var(--content-photo-fit, contain) !important;
}
html body .feed-post .post-banner[data-ratio="wide"] { --content-photo-ratio: 3 / 1; --content-photo-fit: cover; }
html body .feed-post .post-banner[data-ratio="landscape"] { --content-photo-ratio: 16 / 9; --content-photo-fit: cover; }
html body .feed-post .post-banner[data-ratio="square"] { --content-photo-ratio: 1; --content-photo-fit: cover; }
html body .msg-image, html body .ms-msg-bubble > img { max-height: 320px; height: auto; object-fit: contain; }
html body .msg-image { max-width: 100%; }
@media (max-width: 768px) {
  html body .feed-post { --content-photo-height: 240px; }
  html body .msg-image, html body .ms-msg-bubble > img { max-height: 240px; }
}
img[data-content-photo-trigger] { cursor: zoom-in; }
img[data-content-photo-trigger]:focus-visible { outline: 3px solid var(--green, #397d64); outline-offset: -3px; }
.content-photo-card-zoom { margin: .5rem; padding: .45rem .75rem; border: 1px solid var(--border-soft, #bbb); border-radius: 8px; color: var(--ink, #222); background: var(--white, #fff); font: inherit; cursor: zoom-in; }
.content-photo-card-zoom:focus-visible { outline: 3px solid var(--green, #397d64); outline-offset: 2px; }
body.content-photo-viewing { overflow: hidden; }
dialog#caramund-photo-viewer {
  position: fixed; inset: 0; margin: 0; padding: clamp(12px, 3vw, 32px);
  width: 100vw; height: 100dvh; max-width: none; max-height: none; box-sizing: border-box;
  border: 0; background: transparent; color: #fff; overflow: auto;
}
dialog#caramund-photo-viewer:not([open]) { display: none; }
dialog#caramund-photo-viewer[open] { display: grid; place-items: center; }
dialog#caramund-photo-viewer::backdrop { background: rgba(10, 14, 20, .9); }
#caramund-photo-viewer .content-photo-panel { width: fit-content; max-width: 100%; margin: auto; }
#caramund-photo-viewer .content-photo-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 0 12px; }
#caramund-photo-viewer h2 { margin: 0; color: #fff; font: 600 1rem/1.4 system-ui, sans-serif; }
#caramund-photo-viewer .content-photo-close { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; border: 1px solid #ffffff80; border-radius: 10px; background: #202932; color: white; font: 600 1rem/1.4 system-ui, sans-serif; cursor: pointer; }
#caramund-photo-viewer .content-photo-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#caramund-photo-viewer img.content-photo-original { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 170px); object-fit: contain; border-radius: 4px; margin: 0 auto; }
#caramund-photo-viewer .content-photo-caption, #caramund-photo-viewer .content-photo-status { margin: 10px 0 0; max-width: 80ch; color: #fff; font: .9rem/1.4 system-ui, sans-serif; overflow-wrap: anywhere; }
#caramund-photo-viewer [hidden] { display: none !important; }
#caramund-photo-viewer .content-photo-status:empty { display: none; }