/* Media in the chat (filemedia.js): an image or video a run handed over or
 * recorded, in the reading column's card, its place held at a 16:10 frame
 * (a browser recording's) until it loads. */

.ui-media-title { display: flex; align-items: baseline; gap: var(--sv-space-2); min-width: 0; }
.ui-media-title .ui-title { overflow-wrap: anywhere; font-weight: 500; }
.ui-media-meta { flex: none; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-variant-numeric: tabular-nums; }
.ui-media-save { display: inline-flex; align-items: center; gap: 6px; background: var(--sv-surface-sunken); }
.ui-media-save .icon { width: 14px; height: 14px; }
.ui-media-stage { display: grid; place-items: center; min-height: 120px; border-radius: var(--sv-radius); background: var(--sv-surface-sunken); overflow: hidden; }
.ui-media[data-kind="video"] .ui-media-stage:empty { aspect-ratio: 16 / 10; }
.ui-media-stage video, .ui-media-stage img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }

/* A picture is a button: tapped, it opens full screen (expanded.js). */
.ui-media-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }

/* The Files viewer's image, video or PDF (files.js), fitted to the panel. */
.pn-media { display: grid; place-items: center; min-height: 100%; padding: var(--sv-space-2); }
.pn-media img, .pn-media video { display: block; max-width: 100%; height: auto; }
.media-pdf { display: inline-flex; padding: var(--sv-space-2) var(--sv-space-3); border-radius: var(--sv-radius); background: var(--sv-surface-sunken); color: var(--sv-ink); }

/* A picture a #/file/ link in an answer names (filemedia.js pictures), under the link; tapped, it opens full size. */
.md-file-pic { display: block; margin: var(--sv-space-2) 0; padding: 0; border: 0; border-radius: var(--sv-radius); background: var(--sv-surface-sunken); overflow: hidden; cursor: zoom-in; max-width: 100%; }
.md-file-pic img { display: block; max-width: 100%; max-height: min(60vh, 480px); width: auto; height: auto; }