/* NexusDocs image zoom lightbox.
   Self-contained styles for the click-to-zoom overlay. Reuses the
   design tokens defined globally by ai-assistant.css (loaded
   earlier); do not redefine --nx-* variables here. Vanilla CSS,
   no preprocessor, no build step. */

/* Zoom affordance ------------------------------------------------ */

/* Every CDN-hosted content photo advertises that it can be enlarged.
   The matching click behavior lives in javascripts/image-zoom.js. */
img[src^="https://cdn.hadeka.id"] {
  cursor: zoom-in;
}

/* Overlay --------------------------------------------------------- */

/* Full-viewport fixed layer. Shares the Tanya AI widget's backdrop
   color (--nx-backdrop) and fade-in timing, so the two modals read as
   one design system. The layer is inert (opacity 0 + pointer-events
   none) until .nexus-zoom-open is toggled by the JS. */
.nexus-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--nx-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Respect notches / rounded corners via env() like the chat modal. */
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
  background: var(--nx-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.nexus-zoom-overlay.nexus-zoom-open {
  opacity: 1;
  pointer-events: auto;
}

/* Stage ----------------------------------------------------------- */

/* Transparent flex wrapper that centers the photo. Sizing itself is
   done by the JS via inline max-width/max-height on the image (2x the
   inline size, capped at natural resolution and 90vw/90dvh); these
   percentage caps are only a no-JS fallback. */
.nexus-zoom-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

/* Photo ----------------------------------------------------------- */

.nexus-zoom-image {
  display: block;
  /* Fallback caps; normally overridden by the JS-computed inline styles. */
  max-width: min(90vw, 100%);
  max-height: min(90dvh, 100%);
  width: auto;
  height: auto;
  /* Slight lift so the photo separates from the dark backdrop. */
  box-shadow: var(--nx-shadow-z3);
  /* Deliberately NO border-radius: screenshots keep their sharp corners. */
  border: 1px solid var(--nx-fg-lightest);
  /* Entry animation: fade + subtle scale-up with the chat modal's easing. */
  opacity: 0;
  transform: scale(0.95);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 180ms ease;
}

.nexus-zoom-overlay.nexus-zoom-open .nexus-zoom-image {
  opacity: 1;
  transform: scale(1);
}

/* Close button ----------------------------------------------------- */

/* Fixed to the overlay's top-right corner rather than flowing with the
   flex layout, so it also clears very wide photos. Rounded corners are
   fine here (button), only the photo itself stays square. */
.nexus-zoom-close {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: calc(var(--nx-z-modal) + 1);
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--nx-bg);
  color: var(--nx-fg);
  border: 1px solid var(--nx-fg-lightest);
  border-radius: var(--nx-radius);
  cursor: pointer;
  box-shadow: var(--nx-shadow-z1);
  font-family: var(--md-text-font, system-ui, sans-serif);
  /* Hidden until the overlay fades in, then cross-faded with it. */
  opacity: 0;
  transition: opacity 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.nexus-zoom-overlay.nexus-zoom-open .nexus-zoom-close {
  opacity: 1;
}

.nexus-zoom-close:hover {
  box-shadow: var(--nx-shadow-z2);
  background: var(--nx-accent-soft);
}

.nexus-zoom-close:focus-visible {
  outline: 2px solid var(--nx-accent);
  outline-offset: 2px;
}

/* Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nexus-zoom-overlay,
  .nexus-zoom-close,
  .nexus-zoom-image {
    transition-duration: 0.001ms;
  }
  .nexus-zoom-image {
    transform: none;
  }
}

/* Mobile ----------------------------------------------------------- */

/* Tighten the gutters and move the close button inward so both stay
   clear of an edge-to-edge photo on small screens. */
@media (max-width: 540px) {
  .nexus-zoom-overlay {
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  }
  .nexus-zoom-close {
    top: max(0.75rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
  }
}