.attachment-viewer-trigger {
  display: block;
  width: min(100%, 360px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
}

.attachment-viewer-trigger img {
  display: block;
  width: 100%;
}

.attachment-viewer-trigger:focus-visible {
  outline: 3px solid var(--primary, #087f6f);
  outline-offset: 3px;
  border-radius: 8px;
}

.attachment-viewer-hint,
.attachment-viewer-feedback {
  display: block;
  margin: 6px 0;
  color: var(--muted, #62707c);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.attachment-viewer-feedback[role="alert"] {
  color: #b42318;
}

.attachment-viewer-feedback[hidden] {
  display: none;
}

html.attachment-viewer-open {
  overflow: hidden;
}

.attachment-image-viewer .pswp__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
}

.attachment-image-viewer .pswp__top-bar {
  padding-top: env(safe-area-inset-top, 0px);
}

.attachment-image-viewer .pswp__img {
  object-fit: contain;
}