.appnow-image-preview {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    isolation: isolate;
}

.appnow-image-preview__link { display: block; max-width: 100%; }
.appnow-image-preview__link:focus-visible { outline: 3px solid var(--bs-primary, #0aa99a); outline-offset: 3px; border-radius: 8px; }
.appnow-image-preview__hover-card { position: fixed; z-index: 1200; display: none; width: min(560px, calc(100vw - 24px)); height: min(520px, calc(100vh - 24px)); padding: 8px; border: 1px solid var(--bs-border-color, #d8e2ee); border-radius: 12px; background: var(--bs-body-bg, #fff); box-shadow: 0 12px 36px rgb(8 22 39 / 28%); pointer-events: none; }
.appnow-image-preview__hover-card[data-open="true"] { display: block; }
.appnow-image-preview__hover-card img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }

.appnow-image-preview__open {
    position: absolute;
    z-index: 2;
    right: 8px;
    bottom: 8px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #d8e2ee) 85%, transparent);
    border-radius: 10px;
    color: var(--bs-body-color, #17243b);
    background: color-mix(in srgb, var(--bs-body-bg, #fff) 92%, transparent);
    box-shadow: 0 3px 12px rgb(16 35 56 / 16%);
    cursor: pointer;
}

.appnow-image-preview__open svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.appnow-image-preview__open:hover, .appnow-image-preview__open:focus-visible { color: var(--bs-primary, #078f84); outline: 3px solid var(--bs-primary, #0aa99a); outline-offset: 2px; }
.appnow-image-preview--compact .appnow-image-preview__open { width: 28px; height: 28px; right: 0; bottom: 0; border-radius: 50%; background: color-mix(in srgb, var(--bs-body-bg, #fff) 80%, transparent); }
.appnow-image-preview--compact .appnow-image-preview__open svg { width: 15px; height: 15px; }

.appnow-image-preview__dialog {
    width: min(94vw, 1080px);
    max-width: 94vw;
    max-height: min(92dvh, 1000px);
    padding: 14px;
    border: 1px solid var(--bs-border-color, #d8e2ee);
    border-radius: 16px;
    color: var(--bs-body-color, #17243b);
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 20px 70px rgb(8 22 39 / 30%);
}

.appnow-image-preview__dialog::backdrop { background: rgb(8 18 32 / 72%); backdrop-filter: blur(3px); }
.appnow-image-preview__dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.appnow-image-preview__dialog-head p { overflow: hidden; margin: 0; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.appnow-image-preview__dialog-head button { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--bs-border-color, #d8e2ee); border-radius: 10px; color: inherit; background: transparent; font-size: 26px; cursor: pointer; }
.appnow-image-preview__dialog img { display: block; width: 100%; max-height: calc(92dvh - 140px); object-fit: contain; }
.appnow-image-preview__dialog-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.appnow-image-preview__dialog-actions a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--bs-border-color, #d8e2ee); border-radius: 10px; color: inherit; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
    .appnow-image-preview--compact .appnow-image-preview__open { opacity: 0; }
    .appnow-image-preview--compact:hover .appnow-image-preview__open,
    .appnow-image-preview--compact:focus-within .appnow-image-preview__open { opacity: 1; }
}

@media (max-width: 600px) {
    .appnow-image-preview--compact .appnow-image-preview__open { width: 44px; height: 44px; right: -7px; bottom: -7px; opacity: 1; }
    .appnow-image-preview__dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; min-height: 100dvh; margin: 0; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; }
    .appnow-image-preview__dialog img { max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: no-preference) {
    .appnow-image-preview__link img { transition: transform 160ms ease, box-shadow 160ms ease; }
}