:root { --capi-blurred-media-ready: 1; }
/* Decorative fill only. Original media nodes, controls and event handlers survive mounting. */
.blurred-media-container {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: var(--blurred-media-aspect, 16 / 9);
  overflow: hidden;
  border-radius: inherit;
  background: #171512;
}
.blurred-media-container > .blurred-media-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  filter: blur(35px);
  transform: scale(1.1);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
  user-select: none;
}
.blurred-media-ready > .blurred-media-background { opacity: 1; }
.blurred-media-container > .blurred-media-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(0 0 0 / 20%);
  pointer-events: none;
}
.blurred-media-container > .blurred-media-foreground {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: none !important;
  transform: none !important;
}
/* Preserve the existing viewers' dimensions, rounded corners and responsive grid. */
.member-post > .blurred-media-container { max-height: 800px; border-radius: 10px; }
.media-grid .member-post > .blurred-media-container { height: 200px; aspect-ratio: auto; border-radius: 0; }
.chat-attachment:has(> .blurred-media-container) { width: 340px; max-width: 100%; }
.chat-attachment > .blurred-media-container { max-height: 340px; border-radius: 12px; }
#attachment-preview > .blurred-media-container { max-height: 240px; border-radius: 12px; }
.capi-story-stage > .blurred-media-container,
.story-stage > .blurred-media-container,
.blurred-media-container.blurred-media-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  z-index: 0;
}
.blurred-media-container:fullscreen { height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
@media(max-width:600px) {
  .media-grid .member-post > .blurred-media-container { height: 125px; }
}
@media(prefers-reduced-motion:reduce) {
  .blurred-media-container > .blurred-media-background { transition: none; }
}