/* Unfurl (link preview) cards.
   `.bbWrapper img:not(.smilie)` in post.css sets `height: auto` at specificity (0,2,1), which
   beats a plain `.bbCodeBlockUnfurl-icon` (0,2,0). A favicon that fails to load — discord.com's
   .ico is a common one — reports naturalHeight 0, so `height: auto` + `width: 16px` renders its
   alt text in a 16px-wide column hundreds of pixels tall and the card balloons from ~130px to
   ~400px. Each image is therefore pinned through its own row wrapper, reaching (0,3,0), instead
   of depending on an ancestor class the card does not always have. */
.bbCodeBlock--unfurl { margin: 1em 0; max-width: 650px; padding: 12px; border: 1px solid var(--border); border-left: 3px solid var(--block-header-bg); border-radius: 4px; background: var(--quote-bg); font-size: calc(13px * var(--ui-scale)); }
.bbCodeBlock--unfurl .contentRow { display: flex; align-items: center; gap: 12px; }
.bbCodeBlock--unfurl .contentRow-figure { flex: 0 0 80px; margin: 0; }
.bbCodeBlock--unfurl .contentRow-figure .bbCodeBlockUnfurl-image { display: block; width: 80px; height: 80px; object-fit: cover; margin: 0; }
.bbCodeBlock--unfurl .contentRow-main { flex: 1; min-width: 0; }
.bbCodeBlock--unfurl .contentRow-header { margin: 0 0 4px; font-size: calc(15px * var(--ui-scale)); line-height: 1.4; }
.bbCodeBlock--unfurl .contentRow-snippet { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; line-height: 1.4; }
.bbCodeBlock--unfurl .contentRow-minor { margin-top: 5px; color: var(--dimmed); font-size: calc(12px * var(--ui-scale)); }
.bbCodeBlock--unfurl .contentRow-minor .bbCodeBlockUnfurl-icon { display: inline-block; width: 16px; height: 16px; max-height: 16px; object-fit: cover; margin: 0 4px 0 0; vertical-align: text-bottom; }
.media-embed { width: 100%; max-width: 560px; margin: 12px auto; }
.media-frame { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: var(--content-bg); }
.media-embed--portrait { max-width: 325px; }
.media-embed--portrait > .media-frame { aspect-ratio: 9 / 16; }
/* Douyin's player is a vertical 325x735 frame (the userscript's fixed size). Its own UI is
   inside the iframe, so the wrapper only reserves the box and keeps the source link below. */
.media-embed--douyin { max-width: 325px; }
.media-embed--douyin > .media-frame { aspect-ratio: 325 / 735; height: auto; }
.media-embed--douyin > .media-source { display: block; text-align: center; }
.media-embed--imgur { max-width: 560px; }
.media-embed--imgur > .media-frame { aspect-ratio: auto; height: 500px; }
.media-embed--social { max-width: 550px; }
.media-embed--social > .media-frame { aspect-ratio: auto; height: 650px; }
/* Facebook renders through its own SDK, which replaces `.fb-video` with a fluid `<span>`
   wrapper and sizes the iframe itself (a vertical video comes out ~9:16, a post much
   shorter). So the wrapper must not impose an aspect-ratio or a max-width smaller than the
   plugin needs — only centre it and keep the source link underneath. */
.media-embed--facebook { max-width: 560px; }
.media-embed--facebook .fb-video { width: 100%; }
.media-embed--facebook iframe { border: 0; }
.media-source { display: inline-block; margin-top: 5px; font-size: calc(12px * var(--ui-scale)); }
/* oEmbed embeds resolve to a picture (the fallback provider link shows briefly). */
.media-embed--oembed { max-width: 100%; margin: 12px 0; }
.media-embed--oembed > a { display: inline-block; max-width: 100%; }
.media-embed--oembed img { max-width: min(100%, 683px); height: auto; }
.media-embed--oembed.media-embed--fallback { padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: calc(13px * var(--ui-scale)); }
.media-embed--oembed.media-embed--fallback img { max-height: 40px; width: auto; }
.media-embed--fallback { padding: 10px; border: 1px solid var(--border); overflow-wrap: anywhere; }
.media-embed--fallback svg { width: 20px; height: 20px; vertical-align: middle; }
@media (max-width: 620px) {
  .bbCodeBlock--unfurl { padding: 8px; }
  .bbCodeBlock--unfurl .contentRow { gap: 8px; }
  .bbCodeBlock--unfurl .contentRow-figure { flex-basis: 60px; }
  .bbCodeBlock--unfurl .contentRow-figure .bbCodeBlockUnfurl-image { width: 60px; height: 60px; }
}