/* Loading feedback stays inside the final screenshot's reserved layout. */
:where(.media-loading-host) { position: relative; }
.media-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(139, 151, 180, .18);
  border-radius: inherit;
  background: linear-gradient(135deg, #192030, #171825 55%, #222436);
  pointer-events: none;
}
.media-placeholder-window {
  display: grid;
  gap: 12px;
  width: 58%;
  padding: 8%;
  border: 1px solid rgba(180, 198, 233, .18);
  border-radius: 14px;
  background: rgba(180, 198, 233, .035);
}
.media-placeholder-window i {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: rgba(180, 198, 233, .12);
}
.media-placeholder-window i:first-child { width: 45%; }
.media-placeholder-window i:last-child { width: 72%; }
.media-placeholder.has-error { pointer-events: auto; }
.media-placeholder button {
  position: absolute;
  max-width: 90%;
  padding: 12px 16px;
  border: 1px solid rgba(180, 198, 233, .3);
  border-radius: 12px;
  background: #22283b;
  color: #f7f7f4;
  cursor: pointer;
}