/* NRT universal attachment viewer - vendored identically in ops (css/nrt-viewer.css)
   and the client portal (client/css/nrt-viewer.css). Keep the two copies byte-for-byte.
   Colours read the host app's tokens with fallbacks, so it sits correctly in either. */

.nrtv-panel {
  display: none; flex-direction: column;
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(720px, 70%);
  z-index: 2000;
  border-left: 1px solid var(--border2, #333);
  background: var(--bg2, #111);
  box-shadow: -24px 0 48px rgba(0,0,0,.55);
}
.nrtv-panel.nrtv-open { display: flex; }

.nrtv-hdr {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  height: 44px; padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--border, #252525);
}
.nrtv-name {
  flex: 1; min-width: 0; font-size: 12px; color: var(--text, #f5f2f0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nrtv-dl {
  font-size: 11px; color: var(--text2, #9b948e); text-decoration: none;
  border: 1px solid var(--border, #252525); border-radius: 20px; padding: 4px 12px;
  flex-shrink: 0; transition: border-color .12s, color .12s;
}
.nrtv-dl:hover { border-color: var(--brand, var(--accent, #d4651f)); color: var(--brand, var(--accent, #d4651f)); text-decoration: none; }
.nrtv-close {
  background: none; border: none; color: var(--text3, #6b655f); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 6px; flex-shrink: 0;
}
.nrtv-close:hover { color: var(--text, #f5f2f0); }

.nrtv-body {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
/* Fit by default, actual pixels on click. Zoomed mode drops the flex centring
   so the container scrolls the full image instead of clipping it. The zoom
   classes are generic - ops applies them to its own per-slot viewer bodies via
   NRTViewer.wireZoom - so they must not depend on .nrtv-body. */
.nrtv-zoomable img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; cursor: zoom-in; }
.nrtv-zoomable.nrtv-zoomed { display: block; }
.nrtv-zoomable.nrtv-zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
.nrtv-body iframe, .nrtv-zoomable iframe { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 6px; }

.nrtv-loading  { font-size: 13px; color: var(--text2, #9b948e); }
.nrtv-fallback { text-align: center; font-size: 13px; color: var(--text2, #9b948e); line-height: 1.7; }
.nrtv-error br + * { color: var(--danger, #ef4444); }

/* Email rendering */
.nrtv-eml { align-self: stretch; width: 100%; font-size: 13px; }
.nrtv-eml-headers {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
  padding: 0 0 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border, #252525);
}
.nrtv-eml-label { font-size: 10px; font-weight: 700; color: var(--text3, #6b655f); text-transform: uppercase; letter-spacing: .06em; align-self: baseline; }
.nrtv-eml-value { color: var(--text, #f5f2f0); min-width: 0; overflow-wrap: anywhere; }
.nrtv-eml-body  { white-space: pre-wrap; word-break: break-word; line-height: 1.6; color: var(--text, #f5f2f0); }

/* Plain text files */
.nrtv-text { align-self: stretch; width: 100%; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  line-height: 1.6; color: var(--text, #f5f2f0); }

/* No room for a side panel on a phone: the viewer takes the window. */
@media (max-width: 768px) {
  .nrtv-panel { width: 100%; border-left: none; }
}