.forum-post-images a[aria-haspopup="dialog"], a.forum-inline-image[aria-haspopup="dialog"] {
    cursor: zoom-in;
}

html:has(.forum-image-viewer[open]) {
    overflow: hidden;
}

.forum-image-viewer {
    width: fit-content;
    min-width: min(16rem, calc(100% - 1.5rem));
    max-width: calc(100% - 1.5rem);
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--green-deep);
}

.forum-image-viewer::backdrop {
    background: rgb(6 28 21 / 82%);
}

.forum-image-viewer-content {
    padding: 12px;
}

.forum-image-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.forum-image-viewer-bar h2 {
    font-size: 1rem;
    margin-right: auto;
}

.forum-image-viewer-bar form {
    margin: 0;
}

.forum-image-viewer-bar button {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #edf7f1;
    color: var(--green-dark);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.forum-image-viewer-bar button:hover {
    background: var(--mint);
}

.forum-image-viewer-bar button:focus-visible {
    outline: 3px solid #eea840;
    outline-offset: 2px;
}

.forum-image-viewer img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 6.5rem);
    max-height: calc(100dvh - 6.5rem);
    margin-inline: auto;
    object-fit: contain;
}

.forum-image-viewer-stage {
    max-width: 100%;
    max-height: calc(100vh - 7rem);
    max-height: calc(100dvh - 7rem);
    overflow: auto;
}
.forum-image-viewer.is-zoomed { width: calc(100% - 1.5rem); }
.forum-image-viewer.is-zoomed img { max-width: none; max-height: none; margin-inline: 0; }

@media (max-width: 420px) {
    .forum-image-viewer-bar { gap: 8px; }
    .forum-image-viewer-bar button { padding-inline: 10px; }
}