/* Keep photo cards proportional; later than legacy 4:3 preview rules. */
html:root body #messages .message.photo-bubble,
html:root.native-mobile body #messages .message.photo-bubble {
  width: fit-content !important; min-width: 0; max-width: 86%;
  box-sizing: border-box; padding: 3px; position: relative;
  border-radius: 14px 14px 14px 5px;
}
html:root body #messages .message.photo-bubble.mine,
html:root.native-mobile body #messages .message.photo-bubble.mine { border-radius: 14px 14px 5px 14px; }
html:root body #messages .message.photo-bubble .media-preview {
  display: block; position: relative; width: min(var(--chat-photo-width, 280px), 72vw) !important;
  max-width: 100%; aspect-ratio: auto !important; margin: 0;
  border-radius: 11px; overflow: hidden; background: transparent;
}
html:root body #messages .message.photo-bubble .media-preview img {
  position: static !important; display: block; width: 100% !important;
  height: auto !important; max-width: 100%; max-height: none;
  object-fit: contain; border-radius: inherit;
}
html:root body #messages .message.photo-bubble .media-preview img[hidden] { display: none !important; }
html:root body #messages .message.photo-bubble > strong { padding: 4px 7px 3px; margin: 0; }
html:root body #messages .message.photo-bubble > p { display: block; padding: 6px 7px 0; margin: 0; }
html:root body #messages .message.photo-bubble > p:empty { display: none; }
html:root body #messages .message.photo-bubble > .message-meta { margin: 3px 5px 2px 8px; }
html:root body #messages .message.photo-bubble.photo-only { display: grid !important; grid-template-columns: minmax(0, 1fr); }
html:root body #messages .message.photo-bubble.photo-only::after { display: none; }
html:root body #messages .message.photo-bubble.photo-only > strong { grid-area: 1 / 1; }
html:root body #messages .message.photo-bubble.photo-only > .media-preview { grid-area: 2 / 1; }
html:root body #messages .message.photo-bubble.photo-only > .message-meta {
  grid-area: 2 / 1; align-self: end; justify-self: end; float: none; position: relative;
  z-index: 1; margin: 7px; padding: 2px 6px; min-height: 20px;
  border-radius: 10px; background: #0009; color: #fff; font-size: 11px;
  line-height: 16px; text-shadow: 0 1px 1px #0008;
}
html:root body #messages .message.photo-bubble.photo-only > .mobile-reaction-chips { grid-area: 3 / 1; }
html:root body #messages .message.photo-bubble.photo-only > .chat-image-retry { grid-area: 3 / 1; }
html:root body #messages .message.photo-bubble.photo-only:has(.chat-image-error) > .mobile-reaction-chips { grid-area: 4 / 1; }
html:root body #messages .message.photo-bubble.photo-only:has(.chat-image-error) > .message-meta { grid-area: 5 / 1; }
html:root body #messages .message.photo-bubble .chat-image-error { display: block; padding: 20px 12px; color: inherit; font-size: 13px; }
html:root body #messages .message.photo-bubble .chat-image-retry { margin: 5px; min-height: 44px; color: inherit; }
html:root body #messages .message.photo-bubble .media-preview:focus-visible { outline: 2px solid var(--chat-link, #008069); outline-offset: -3px; }