#imageModal.media-viewer, #videoModal.media-viewer {
  position: fixed;
  inset: var(--app-top) 0 auto;
  width: 100%;
  height: var(--app-height);
  max-height: none;
  margin: 0;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  background: #0c1017;
  color: #fff;
  z-index: 200;
  overscroll-behavior: none;
  isolation: isolate;
}
#imageModal.media-viewer[hidden], #videoModal.media-viewer[hidden] { display: none !important; }
.media-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 4px 10px 4px 16px;
  box-sizing: border-box;
}
.media-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/1.4 system-ui, sans-serif; }
.media-viewer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: #242b36;
  color: #fff;
  font: 24px/1 system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: none;
}
.media-viewer button:disabled { opacity: .35; cursor: default; }
.media-viewer button:focus-visible, .message-image:focus-visible, .media-expand:focus-visible { outline: 3px solid #7eb7ff; outline-offset: -3px; }
.media-viewer .media-close { font-size: 32px; }
.media-stage { position: relative; display: grid; place-items: center; flex: 1 1 0; min-height: 0; min-width: 0; overflow: hidden; }
#imageStage { touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
#imageStage.is-zoomed { cursor: grab; }
#imageStage.is-dragging { cursor: grabbing; }
#imageModal #modalImage {
  display: block;
  grid-area: 1 / 1;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  object-fit: contain;
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
  -webkit-user-drag: none;
}
#imageModal.is-loading #modalImage, #imageModal.has-error #modalImage { visibility: hidden; }
.media-status { position: absolute; top: 50%; left: 12px; right: 12px; text-align: center; padding: 12px; border-radius: 10px; color: #fff; background: #161d28e8; font: 15px/1.5 system-ui, sans-serif; pointer-events: none; }
.media-status:empty { display: none; }
#videoModal #modalVideo { display: block; width: 100%; height: 100%; min-height: 0; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; object-fit: contain; background: #0c1017; }
.media-video-stage .media-status { top: 10px; }
.message .image-container, .message .video-container { position: relative; width: 100%; min-width: 0; }
.message .message-image, .message .message-video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(420px, 55svh);
  object-fit: contain;
  border-radius: 12px;
}
.message .message-image { cursor: zoom-in; }
.media-expand { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; padding: 10px; border: 1px solid #ffffff60; border-radius: 12px; color: #fff; background: #101827db; cursor: pointer; touch-action: manipulation; }
.media-expand svg { width: 22px; height: 22px; }
@media (max-height: 420px) {
  .media-toolbar { min-height: 48px; padding-block: 2px; }
}