/* Use the app's modal and button theme; only the original-image stage is special. */
.image-viewer-overlay { z-index:600; align-items:center; padding:20px; color:var(--text); }
.image-viewer.modal {
  width:min(1500px,96vw); max-width:96vw; height:min(92dvh,calc(100dvh - 40px)); max-height:calc(100dvh - 40px);
  display:flex; flex-direction:column; min-height:0; overflow:hidden; border-radius:16px;
}
.image-viewer .modal-header { flex:0 0 auto; gap:12px; }
.image-viewer .modal-header h3 { flex:1; min-width:0; margin:0; font-size:16px; line-height:1.4; overflow-wrap:anywhere; }
.image-viewer .modal-close {
  display:flex; align-items:center; justify-content:center; flex:0 0 32px;
  width:32px; height:32px; padding:0; border-radius:999px; line-height:1;
}
.image-viewer .modal-footer { flex:0 0 auto; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; }
.image-viewer .btn { min-width:44px; min-height:40px; font-family:inherit; font-size:13px; }
.image-viewer button:focus-visible { outline:2px solid var(--primary-light); outline-offset:3px; }
.image-viewer-stage {
  position:relative; flex:1; min-height:0; margin:14px 20px; border-radius:12px;
  background:rgba(255,255,255,.62); border:1px solid var(--glass-brd);
  overflow:hidden; touch-action:none; cursor:grab; user-select:none;
}
.image-viewer-stage:active { cursor:grabbing; }
.image-viewer-stage img {
  position:absolute; left:50%; top:50%; max-width:none!important; max-height:none!important;
  transform-origin:center; pointer-events:none; user-select:none;
}
.image-viewer-status { font-size:12px; color:var(--text-secondary); white-space:nowrap; }
.image-viewer-help { flex:0 0 auto; font-size:12px; line-height:1.5; color:var(--text-secondary); margin:0; padding:0 20px 14px; text-align:center; }
body.summary-workspace-open { overflow:hidden; }
@media(max-width:768px) {
  .image-viewer-overlay { padding:0; }
  .image-viewer.modal {
    width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
    padding:calc(6px + env(safe-area-inset-top,0px)) 10px calc(8px + env(safe-area-inset-bottom,0px)); gap:8px;
    background:transparent!important; border:none!important; border-radius:0!important;
    box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
  }
  .image-viewer .modal-header { min-height:34px; padding:0 2px 0 8px; border:0; }
  .image-viewer .modal-header h3 { font-size:14px; }
  .image-viewer .modal-close {
    min-height:32px; border:none!important;
    box-shadow:0 12px 28px rgba(17,24,39,.13),0 1px 0 rgba(255,255,255,.9) inset!important;
  }
  .image-viewer-stage {
    margin:0; border-radius:24px; background:rgba(255,255,255,.68);
    border:0; box-shadow:0 18px 42px rgba(17,24,39,.12),0 1px 0 rgba(255,255,255,.88) inset;
  }
  .image-viewer .modal-footer {
    display:grid; grid-template-columns:44px 44px minmax(0,1fr) minmax(0,1fr);
    gap:8px; padding:0; border:0;
  }
  .image-viewer .modal-footer .btn { min-height:42px; width:100%; padding:6px 8px; font-size:12px; border-radius:999px; }
  .image-viewer-status { grid-column:1/-1; justify-self:center; }
  .image-viewer-help { padding:0 6px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .image-viewer button { transition:none; } }