/* Shared scientific image viewer. All styles stay inside the iv namespace. */
body.iv-viewer-open { overflow:hidden; }
img[data-iv-clickable="true"] { cursor:zoom-in; }

dialog.iv-dialog.iv-dialog {
  --iv-accent:#7754b5;
  --iv-ink:#3d3448;
  --iv-muted:#77657f;
  --iv-surface:#faf9fc;
  --iv-motion:220ms;
  --iv-ease:cubic-bezier(.22,.8,.3,1);
  position:fixed;
  inset:0;
  width:calc(100vw - 32px);
  height:calc(100vh - 32px);
  height:calc(100dvh - 32px);
  max-width:none;
  max-height:none;
  margin:auto;
  padding:0;
  border:0;
  border-radius:17px;
  color:var(--iv-ink);
  background:var(--iv-surface);
  box-shadow:0 20px 100px rgba(25,17,35,.22);
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC",sans-serif;
  line-height:1.5;
  opacity:0;
  transform:translateY(12px) scale(.985);
  transition:opacity var(--iv-motion) var(--iv-ease),transform var(--iv-motion) var(--iv-ease);
}

dialog.iv-dialog.iv-dialog[open] { display:flex; flex-direction:column; }
dialog.iv-dialog.iv-dialog.is-visible { opacity:1; transform:translateY(0) scale(1); }
dialog.iv-dialog.iv-dialog.is-closing { opacity:0; transform:translateY(8px) scale(.99); pointer-events:none; }
dialog.iv-dialog.iv-dialog::backdrop {
  background:rgba(30,22,42,.46);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  animation:iv-backdrop-in var(--iv-motion,220ms) ease both;
}
dialog.iv-dialog.iv-dialog.is-closing::backdrop { animation:iv-backdrop-out var(--iv-motion,220ms) ease both; }

.iv-dialog.iv-dialog *, .iv-dialog.iv-dialog *::before, .iv-dialog.iv-dialog *::after { box-sizing:border-box; }
.iv-dialog.iv-dialog .iv-toolbar {
  position:relative;
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-width:0;
  min-height:64px;
  margin:0;
  padding:10px 18px 10px 22px;
  border:0;
  border-bottom:1px solid #eae4ee;
  border-radius:0;
  background:rgba(255,255,255,.82);
  color:var(--iv-ink);
  box-shadow:none;
  text-align:left;
}
.iv-dialog.iv-dialog .iv-toolbar::before,
.iv-dialog.iv-dialog .iv-toolbar::after { display:none; }
.iv-dialog.iv-dialog .iv-caption {
  min-width:0;
  margin:0;
  padding:0;
  color:var(--iv-ink);
  font-size:14px;
  font-weight:560;
  line-height:1.55;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.iv-dialog.iv-dialog .iv-actions {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:5px;
  margin:0;
  padding:0;
}
.iv-dialog.iv-dialog .iv-action {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:40px;
  min-height:40px;
  margin:0;
  padding:7px 11px;
  border:0;
  border-radius:9px;
  color:#665272;
  background:transparent;
  box-shadow:none;
  font:inherit;
  font-size:13px;
  font-weight:550;
  line-height:1.25;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background 160ms ease,color 160ms ease,transform var(--iv-motion) var(--iv-ease);
}
.iv-dialog.iv-dialog .iv-action:hover { background:#eee7f6; color:#694598; transform:translateY(-1px); }
.iv-dialog.iv-dialog .iv-action:active { background:#e7dcf1; transform:scale(.95); }
.iv-dialog.iv-dialog .iv-action:disabled { color:#b5aaba; background:transparent; opacity:1; cursor:default; transform:none; }
.iv-dialog.iv-dialog .iv-action svg { display:block; width:19px; height:19px; flex:0 0 auto; }
.iv-dialog.iv-dialog .iv-action[data-action="close"],
.iv-dialog.iv-dialog .iv-close { margin-left:6px; background:#eee9f2; color:#65546f; }
.iv-dialog.iv-dialog .iv-action[data-action="close"]:hover,
.iv-dialog.iv-dialog .iv-close:hover { background:#e3d9ed; color:#563a76; }
.iv-dialog.iv-dialog .iv-zoom-label {
  display:inline-block;
  min-width:43px;
  padding:0 3px;
  color:var(--iv-muted);
  font-size:12px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  text-align:center;
  user-select:none;
}
.iv-dialog.iv-dialog .iv-stage {
  position:relative;
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:center;
  min-height:0;
  min-width:0;
  width:100%;
  margin:0;
  padding:24px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#c5b8d1 transparent;
  background:var(--iv-surface);
  -webkit-overflow-scrolling:touch;
}
.iv-dialog.iv-dialog .iv-stage.is-zoomed { display:block; }
.iv-dialog.iv-dialog img.iv-image {
  display:block;
  flex:0 0 auto;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  margin:auto;
  padding:0;
  border:0;
  border-radius:0;
  object-fit:contain;
  background:#fff;
  box-shadow:none;
  transform:none;
  cursor:zoom-in;
  user-select:none;
  -webkit-user-drag:none;
}
.iv-dialog.iv-dialog .iv-stage.is-zoomed img.iv-image { cursor:zoom-out; }
.iv-dialog.iv-dialog .iv-image[hidden],
.iv-dialog.iv-dialog .iv-status[hidden] { display:none; }
.iv-dialog.iv-dialog .iv-status {
  margin:0;
  padding:22px;
  color:var(--iv-muted);
  background:transparent;
  font-size:14px;
  font-weight:400;
  line-height:1.75;
  text-align:center;
}
.iv-dialog.iv-dialog .iv-status .iv-action { margin:12px 8px 0; background:#eee7f6; color:#694598; }
.iv-dialog.iv-dialog :is(.iv-action,.iv-stage):focus-visible {
  outline:2px solid #9671c9;
  outline-offset:3px;
}
.iv-dialog.iv-dialog .iv-stage:focus-visible { outline-offset:-4px; }

@keyframes iv-backdrop-in { from { background-color:rgba(30,22,42,0); } to { background-color:rgba(30,22,42,.46); } }
@keyframes iv-backdrop-out { from { background-color:rgba(30,22,42,.46); } to { background-color:rgba(30,22,42,0); } }

@media (max-width:600px) {
  dialog.iv-dialog.iv-dialog {
    width:calc(100vw - 12px);
    height:calc(100vh - 12px);
    height:calc(100dvh - 12px);
    border-radius:13px;
  }
  .iv-dialog.iv-dialog .iv-toolbar {
    flex-wrap:wrap;
    gap:6px 12px;
    min-height:0;
    padding:12px 12px 8px;
  }
  .iv-dialog.iv-dialog .iv-caption { flex:1 1 100%; font-size:12px; -webkit-line-clamp:2; }
  .iv-dialog.iv-dialog .iv-actions { width:100%; justify-content:flex-end; gap:4px; }
  .iv-dialog.iv-dialog .iv-action { min-width:42px; min-height:42px; padding:8px 10px; font-size:12px; }
  .iv-dialog.iv-dialog .iv-stage { padding:12px; }
  .iv-dialog.iv-dialog .iv-status { padding:18px 10px; font-size:13px; }
}

@media (max-width:360px) {
  .iv-dialog.iv-dialog .iv-actions { gap:2px; }
  .iv-dialog.iv-dialog .iv-action { min-width:38px; padding:8px; }
  .iv-dialog.iv-dialog .iv-zoom-label { min-width:39px; }
}

@media (prefers-reduced-motion:reduce) {
  dialog.iv-dialog.iv-dialog { --iv-motion:0ms; transform:none; transition:none; }
  dialog.iv-dialog.iv-dialog,
  dialog.iv-dialog.iv-dialog *,
  dialog.iv-dialog.iv-dialog::backdrop { transition-duration:0ms!important; animation-duration:0ms!important; }
  dialog.iv-dialog.iv-dialog.is-closing { transform:none; }
  dialog.iv-dialog.iv-dialog::backdrop { animation:none; }
  .iv-dialog.iv-dialog .iv-action { transition:none; }
  .iv-dialog.iv-dialog .iv-action:hover,
  .iv-dialog.iv-dialog .iv-action:active { transform:none; }
}

@media print {
  dialog.iv-dialog.iv-dialog { display:none!important; }
  body.iv-viewer-open { overflow:visible; }
}
