/* Click-to-zoom for inline rich-text images — the CSS half of js/inlineImageZoom.js.
   Global (this project has no Blazor scoped CSS; *.razor.css files are dead).

   Two jobs:
     1. The magnifier affordance on eligible images, so the interaction is discoverable at all.
     2. The full-screen overlay the interop builds and appends to document.body.

   The overlay deliberately mirrors ImageLightbox's .ilb visual language (dim backdrop, contained
   image, rounded corners, soft shadow) so the two enlargers read as one system, even though they
   share no code — see the header comment in inlineImageZoom.js for why they cannot. */

/* ── Affordance ─────────────────────────────────────────────────────────────────────────────────
   KEEP THIS LIST IN SYNC with ZOOM_SELECTOR in js/inlineImageZoom.js. If the cursor and the
   behaviour disagree, every mismatch reads to the user as a broken image. */
img[data-file-guid],
.rn-body img,
.am-body img,
.rtf-display img,
.announcement-web-view img,
.nv-row-body img,
.sticky-text img,
.fb-card-text img,
.fb-comment-body img,
.convo-comment-body img {
    cursor: zoom-in;
    transition: box-shadow 160ms cubic-bezier(.4,0,.2,1);
}

img[data-file-guid]:hover,
.rn-body img:hover,
.am-body img:hover,
.rtf-display img:hover,
.announcement-web-view img:hover,
.nv-row-body img:hover,
.sticky-text img:hover,
.fb-card-text img:hover,
.fb-comment-body img:hover,
.convo-comment-body img:hover {
    /* Never `filter: drop-shadow` — it is banned on the glass surfaces these bodies can sit on. */
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

img[data-file-guid]:focus-visible,
.rn-body img:focus-visible,
.am-body img:focus-visible,
.rtf-display img:focus-visible,
.announcement-web-view img:focus-visible,
.nv-row-body img:focus-visible,
.sticky-text img:focus-visible,
.fb-card-text img:focus-visible,
.fb-comment-body img:focus-visible,
.convo-comment-body img:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Exclusions — must match DENY_SELECTOR in the interop. These images are not zoomable, so they
   must not advertise a magnifier. Written after the rules above so they win on equal specificity
   where the selector is at least as specific. */
a img,
[contenteditable] img,
.e-mention-chip img,
.mud-avatar img,
.convo-files img {
    cursor: inherit;
    box-shadow: none;
}
/* .ilb img / .iiz-img are not listed: neither carries data-file-guid nor sits in one of the
   wrappers above, so they never pick up the affordance rules and must keep their own styling. */

/* The editor's own images: richTextField.js owns click there (select + resize handles). */
.rtf-editor img {
    cursor: default;
}

/* ── Overlay ────────────────────────────────────────────────────────────────────────────────── */
.iiz-overlay {
    position: fixed;
    inset: 0;
    /* Above MudBlazor's dialog (1400), snackbar (1500) and tooltip (1600) layers: an inline image
       is most often read inside a dialog, and the overlay must clear the surface it came from. */
    z-index: 2400;
    background: rgba(15,23,43,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    cursor: zoom-out;
}

.iiz-figure {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 88vh;
}

.iiz-img {
    /* Full size, bounded only by the viewport — the point of the feature is escaping the 240/420px
       caps that .am-body img / .rn-body img impose on the reading surfaces. */
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
    background: #0b1020;
    box-shadow: 0 10px 20px rgba(0,0,0,.08), 0 3px 6px rgba(0,0,0,.06);
    cursor: zoom-out;
}

.iiz-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 180ms cubic-bezier(.4,0,.2,1);
}

.iiz-close:hover {
    background: rgba(255,255,255,.24);
}

@media (max-width: 600px) {
    .iiz-overlay {
        padding: 16px;
    }

    .iiz-figure,
    .iiz-img {
        max-width: 96vw;
        max-height: 84vh;
    }
}

/* No-GSAP / reduced-motion path: the interop sets opacity + visibility directly rather than
   tweening, so the overlay must be usable without any animation having run. */
@media (prefers-reduced-motion: reduce) {
    .iiz-overlay {
        opacity: 1 !important;
        visibility: visible !important;
    }
}