.um-media-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.um-media-drop-hint {
  align-self: center;
  color: var(--um-muted);
  font-size: 12px;
  font-weight: 700;
}

.um-media-image-shell {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
}

.um-media-image-shell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.um-media-image-shell.is-image-failed img {
  display: none;
}

.um-media-image-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 10px;
  color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(135deg, #111827 0%, #3f1f2a 100%);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  overflow-wrap: anywhere;
}

.um-media-image-shell.is-image-failed .um-media-image-fallback {
  display: grid;
}

.um-media {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  background: #111;
  display: block;
}

.um-media-button {
  position: relative;
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  margin: 0;
  background: #111;
  cursor: pointer;
  text-align: inherit;
}

.um-media-button .um-media {
  pointer-events: none;
}

/* The feed reserves each media box from its remembered aspect ratio (see
   mediaAspectAttrs in the JS) so a card never collapses to nothing and then
   snaps to full height while the file downloads.

   The box takes its height from that ratio alone - capped at 4:5 for photos
   and square for video, in the JS - the way Facebook's feed does, so a square
   photo shows square. There used to be a fixed 520px height cap here, and
   that is what turned every square and portrait post into a cropped
   landscape strip: a 9:16 video was forced into a 678x520 box and lost more
   than half its frame. */
.um-media-button.is-media-sized .um-media {
  height: 100%;
  max-height: none;
}

/* A portrait video capped at square is pillarboxed on the dark ground rather
   than cropped, matching how Facebook shows vertical video in the feed. When
   the box already matches the video, contain and cover look identical, so
   this only changes anything once the cap kicks in. Photos keep cover, which
   crops only the part beyond 4:5 - again what Facebook does. */
.um-media-button[data-media-clamp="video"] .um-media {
  object-fit: contain;
}

.um-media.is-media-sized {
  height: auto;
}

.um-media-button-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 40px;
  background: rgba(0, 0, 0, 0.22);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.um-media-button:hover .um-media,
.um-media-button:focus-visible .um-media {
  filter: brightness(0.94);
}

.um-content-row {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--um-line);
}

.um-content-row span {
  color: var(--um-muted);
  font-size: 14px;
}

.um-overlay {
  position: fixed;
  inset: 72px 18px auto auto;
  z-index: 20;
  width: min(380px, calc(100vw - 36px));
}

/* Two classes on purpose. The generic .um-modal / .um-modal-backdrop rules now
   live in notifications-comments.css, which loads AFTER this file (see
   includes/style-parts.php). With single-class selectors those generic rules
   won the tie on source order and turned the viewer into a 560px white box
   with 16px padding, pinned to the top on a light backdrop: the two-column
   grid collapsed to 511px, the photo became a 131px strip, and the header
   title vanished (white text on white). In the original single CSS file
   .um-modal came first, so this only broke when the file was split. Matching
   the element with both its classes wins on specificity instead, whatever
   order the parts load in. */
.um-modal-backdrop.um-media-viewer-backdrop {
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.78);
}

.um-modal.um-media-viewer-modal {
  width: min(1280px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: hidden;
  background: #050607;
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.um-media-viewer-modal .um-modal-head {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.um-media-viewer-modal .um-modal-head h2 {
  color: #fff;
}

.um-media-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  min-height: min(760px, calc(100vh - 120px));
}

.um-media-viewer-stage {
  min-width: 0;
  display: grid;
  place-items: center;
  background: #000;
}

.um-media-viewer-stage img,
.um-media-viewer-stage video {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  display: block;
}

.um-media-viewer-panel {
  min-width: 0;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: var(--um-surface-strong);
  color: var(--um-text);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

/* The viewer panel is a post card now. It sits inside a panel that already draws the surface,
   so the card drops its own frame instead of nesting one box inside another, and keeps the
   separators the old bespoke markup had. */
.um-media-viewer-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.um-media-viewer-card .um-card-head,
.um-media-viewer-card .um-card-body {
  border-bottom: 1px solid var(--um-line);
}

.um-media-viewer-card .um-card-body {
  color: var(--um-muted);
}