/* ═══════════════════════════════════════════════════════════════════════
   oms-rd-viewer.css — the in-app file viewer (/js/oms-lightbox.js).
   One stylesheet for every portal and every public token page; the script
   injects a <link> to this file itself if a page forgot to.

   Root #omslb.omsv · z-index 100001: above ui-dialogs.js (100000) so a
   dialog fired from inside the viewer can never land behind it, and far
   above every portal ceiling (#login-overlay 9999, .msg-drawer 9200).

   Everything is scoped under #omslb so nothing here can touch a page, and no
   page rule can reach in (id beats the portals' element/class rules).
   ═══════════════════════════════════════════════════════════════════════ */

#omslb {
    --v-bg: rgba(11, 13, 30, .94);
    --v-bar: rgba(16, 19, 44, .72);
    --v-line: rgba(255, 255, 255, .09);
    --v-ink: #F4F5FF;
    --v-ink-2: rgba(226, 229, 255, .66);
    --v-btn: rgba(255, 255, 255, .07);
    --v-btn-h: rgba(255, 255, 255, .15);
    --v-accent: #3D4EE8;
    --v-accent-h: #4F60F5;
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 100001;
    display: none;
    flex-direction: column;
    background: var(--v-bg);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: var(--v-ink);
    font: 500 13px/1.4 "Plus Jakarta Sans", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none; user-select: none;
    box-sizing: border-box;
}
#omslb *, #omslb *::before, #omslb *::after { box-sizing: border-box; }
#omslb.omslb-open { display: flex; animation: omsv-in .16s ease-out; }
@keyframes omsv-in { from { opacity: 0; } to { opacity: 1; } }
/* [hidden] must beat the grid/flex displays below — attribute + class + id. */
#omslb .omsv-msg[hidden], #omslb .omsv-spin[hidden], #omslb .omsv-nav[hidden], #omslb .omsv-pdf[hidden] { display: none; }

/* ── top bar ──────────────────────────────────────────────────────────── */
#omslb .omsv-top {
    flex: none; display: flex; align-items: center; gap: 14px;
    min-height: 64px; padding: 10px 14px 10px 18px;
    background: var(--v-bar);
    border-bottom: 1px solid var(--v-line);
}
#omslb .omsv-file { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
#omslb .omsv-fic {
    flex: none; width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(61, 78, 232, .22); color: #B9C0FF;
}
#omslb.omsv-kind-pdf .omsv-fic { background: rgba(232, 61, 86, .2); color: #FFB3BE; }
#omslb .omsv-fmeta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#omslb .omsv-name {
    font-size: 14.5px; font-weight: 750; letter-spacing: -.005em; color: var(--v-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-user-select: text; user-select: text;
}
#omslb .omsv-sub {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px;
    font-size: 12px; font-weight: 600; color: var(--v-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden;
}
#omslb .omsv-sub .omsv-capt { color: #DDE1FF; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
#omslb .omsv-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; display: inline-block; }
#omslb .omsv-count {
    padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--v-ink);
    font-size: 11px; font-weight: 700;
}

#omslb .omsv-tools { flex: none; display: flex; align-items: center; gap: 10px; }
#omslb .omsv-grp {
    display: flex; align-items: center; gap: 2px;
    padding: 3px; border-radius: 12px;
    background: rgba(255, 255, 255, .045); border: 1px solid var(--v-line);
}
#omslb .omsv-sep { width: 1px; height: 24px; background: var(--v-line); }
#omslb .omsv-b {
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 34px; min-width: 34px; padding: 0 8px; margin: 0;
    border: 0; border-radius: 9px; background: transparent; color: var(--v-ink);
    font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
    cursor: pointer; transition: background .12s, color .12s, opacity .12s;
}
#omslb .omsv-b:hover { background: var(--v-btn-h); }
#omslb .omsv-b:focus-visible, #omslb .omsv-nav:focus-visible, #omslb .omsv-th:focus-visible, #omslb .omsv-cbtn:focus-visible {
    outline: 2px solid #8C97FF; outline-offset: 2px;
}
#omslb .omsv-b:disabled { opacity: .32; cursor: default; background: transparent; }
#omslb .omsv-b svg { width: 18px; height: 18px; flex: none; }
#omslb .omsv-pct { min-width: 54px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--v-ink-2); }
#omslb .omsv-pct:hover { color: var(--v-ink); }
#omslb .omsv-zoomgrp.omsv-off { opacity: .45; }
#omslb .omsv-dl { background: var(--v-accent); padding: 0 13px 0 11px; color: #fff; }
#omslb .omsv-dl:hover { background: var(--v-accent-h); }
#omslb .omsv-x {
    flex: none; width: 40px; height: 40px; border-radius: 12px;
    background: var(--v-btn); border: 1px solid var(--v-line);
}
#omslb .omsv-x svg { width: 20px; height: 20px; }

/* ── stage ────────────────────────────────────────────────────────────── */
#omslb .omsv-stage {
    position: relative; flex: 1 1 auto; min-height: 0;
    overflow: hidden; touch-action: none; cursor: default;
}
#omslb .omsv-img {
    position: absolute; left: 50%; top: 50%;
    max-width: none; max-height: none; margin: 0;
    transform-origin: center center;
    transition: transform .16s cubic-bezier(.2, .7, .2, 1);
    will-change: transform;
    border-radius: 6px;
    /* Artwork is often transparent PNG — white ink on clear shows on neither
       white nor black, so it sits on a quiet checkerboard. */
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #EEF0F5 25%, transparent 25%, transparent 75%, #EEF0F5 75%),
        linear-gradient(45deg, #EEF0F5 25%, transparent 25%, transparent 75%, #EEF0F5 75%);
    background-size: 20px 20px; background-position: 0 0, 10px 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
    cursor: zoom-in;
    -webkit-user-drag: none; -webkit-touch-callout: none;
}
#omslb .omsv-img.omsv-nofx { transition: none; }
#omslb .omsv-stage.omsv-zoomed .omsv-img { cursor: grab; }
#omslb .omsv-stage.omsv-grabbing .omsv-img { cursor: grabbing; }
#omslb.omsv-kind-pdf .omsv-img, #omslb.omsv-kind-other .omsv-img { display: none; }

#omslb .omsv-pdf {
    /* An <iframe> is a replaced element: top+bottom alone leaves it at its
       150px intrinsic height, so the height is explicit. */
    position: absolute; top: 16px; left: 50%;
    width: min(1120px, calc(100% - 32px)); height: calc(100% - 32px); transform: translateX(-50%);
    border: 0; border-radius: 10px; background: #fff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}

#omslb .omsv-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; }
#omslb .omsv-card {
    width: min(380px, 100%); padding: 28px 26px 24px; border-radius: 16px; text-align: center;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--v-line);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#omslb .omsv-cic {
    width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 8px;
    background: rgba(61, 78, 232, .22); color: #B9C0FF;
}
#omslb .omsv-cic svg { width: 26px; height: 26px; }
#omslb .omsv-card b { font-size: 15px; font-weight: 750; }
#omslb .omsv-card > span { font-size: 12.5px; color: var(--v-ink-2); }
#omslb .omsv-cact { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
#omslb .omsv-cbtn {
    appearance: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px;
    border-radius: 10px; border: 1px solid var(--v-line); background: var(--v-btn); color: var(--v-ink);
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
#omslb .omsv-cbtn:hover { background: var(--v-btn-h); }
#omslb .omsv-cbtn.pri { background: var(--v-accent); border-color: var(--v-accent); color: #fff; }
#omslb .omsv-cbtn.pri:hover { background: var(--v-accent-h); }
#omslb .omsv-cbtn svg { width: 17px; height: 17px; }

#omslb .omsv-spin { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
#omslb .omsv-spin i {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .16); border-top-color: #fff;
    animation: omsv-spin .8s linear infinite;
}
@keyframes omsv-spin { to { transform: rotate(360deg); } }

#omslb .omsv-nav {
    appearance: none; position: absolute; top: 50%; z-index: 2;
    width: 48px; height: 48px; margin-top: -24px; padding: 0; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .12); background: rgba(16, 19, 44, .62); color: #fff;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    cursor: pointer; transition: background .12s, transform .12s;
}
#omslb .omsv-nav:hover { background: rgba(61, 78, 232, .85); }
#omslb .omsv-nav:active { transform: scale(.94); }
#omslb .omsv-nav svg { width: 22px; height: 22px; }
#omslb .omsv-prev { left: 18px; }
#omslb .omsv-next { right: 18px; }
#omslb.omsv-kind-pdf .omsv-prev { left: 10px; }
#omslb.omsv-kind-pdf .omsv-next { right: 10px; }

/* ── footer: thumbnail strip + hint ───────────────────────────────────── */
#omslb .omsv-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 14px 12px; }
#omslb .omsv-strip {
    display: flex; gap: 8px; max-width: 100%;
    overflow-x: auto; overflow-y: hidden; padding: 3px 2px 5px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
#omslb .omsv-strip:empty { display: none; }
#omslb .omsv-th {
    appearance: none; flex: none; width: 58px; height: 58px; padding: 0; margin: 0;
    border-radius: 10px; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; background: #fff; opacity: .5;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
    transition: opacity .12s, border-color .12s, transform .12s;
}
#omslb .omsv-th:hover { opacity: .85; }
#omslb .omsv-th.on { opacity: 1; border-color: #8C97FF; transform: translateY(-1px); }
#omslb .omsv-th img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
#omslb .omsv-thf {
    width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: #23284F; color: #FFB3BE;
}
#omslb .omsv-thf em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--v-ink-2); }
#omslb .omsv-hint { font-size: 11.5px; font-weight: 600; color: rgba(226, 229, 255, .42); text-align: center; }
#omslb.omsv-kind-pdf .omsv-hint, #omslb.omsv-kind-other .omsv-hint { visibility: hidden; }

/* ── toast ────────────────────────────────────────────────────────────── */
#omslb .omsv-toast {
    position: absolute; left: 50%; top: 78px; transform: translate(-50%, -6px);
    padding: 8px 14px; border-radius: 999px;
    background: #fff; color: #1F2340; font-size: 12.5px; font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 3;
}
#omslb .omsv-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── a hint on the page itself: viewable things look clickable ────────── */
[data-zoom], img[data-full], img.zoomable { cursor: zoom-in; }

/* "View full size" chip — for tiles whose own click means something else
   (the visual workspace render zones: click = replace the image). */
.omsv-zbtn {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 30px; height: 30px; padding: 0; margin: 0;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px;
    background: rgba(31, 35, 64, .72); color: #fff;
    cursor: zoom-in; opacity: .9; transition: opacity .12s, background .12s, transform .12s;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.omsv-zbtn:hover { background: #3D4EE8; opacity: 1; transform: scale(1.05); }
.omsv-zbtn:focus-visible { outline: 2px solid #8C97FF; outline-offset: 2px; }
.omsv-zbtn svg { width: 15px; height: 15px; display: block; }
#visual-workspace .vw-logo-img-zone { position: relative; }
#visual-workspace .vw-logo-img-zone .omsv-zbtn { top: 6px; right: 6px; width: 26px; height: 26px; }

/* ── tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    #omslb .omsv-dl .omsv-bl { display: none; }
    #omslb .omsv-dl { padding: 0 8px; }
    #omslb .omsv-sub .omsv-capt { max-width: 200px; }
}

/* ── phone: name + close on top, the toolbar becomes a bottom bar ─────── */
@media (max-width: 700px) {
    #omslb .omsv-top {
        min-height: 56px; padding: 8px 8px 8px 12px; gap: 10px;
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
    }
    #omslb .omsv-fic { width: 32px; height: 32px; border-radius: 9px; }
    #omslb .omsv-fic svg { width: 16px; height: 16px; }
    #omslb .omsv-name { font-size: 13.5px; }
    #omslb .omsv-sub { font-size: 11px; }
    #omslb .omsv-x { width: 38px; height: 38px; }
    #omslb .omsv-tools {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
        justify-content: center; gap: 6px;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
        background: var(--v-bar); border-top: 1px solid var(--v-line);
    }
    #omslb .omsv-sep { display: none; }
    #omslb .omsv-hide-sm { display: none; }
    #omslb .omsv-b { height: 38px; min-width: 38px; padding: 0 7px; }
    #omslb .omsv-pct { min-width: 46px; }
    /* Room for the bottom toolbar under the strip. */
    #omslb .omsv-foot { padding: 6px 8px calc(62px + env(safe-area-inset-bottom, 0px)); }
    #omslb .omsv-th { width: 46px; height: 46px; border-radius: 8px; }
    #omslb .omsv-hint { display: none; }
    #omslb .omsv-nav { width: 38px; height: 38px; margin-top: -19px; background: rgba(16, 19, 44, .5); }
    #omslb .omsv-nav svg { width: 18px; height: 18px; }
    #omslb .omsv-prev { left: 6px; }
    #omslb .omsv-next { right: 6px; }
    #omslb .omsv-pdf { top: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 8px; }
    #omslb .omsv-toast { top: 64px; }
}
@media (max-width: 380px) {
    #omslb .omsv-tools { gap: 4px; }
    #omslb .omsv-grp { padding: 2px; }
    #omslb .omsv-b { min-width: 34px; padding: 0 5px; }
}
@media (prefers-reduced-motion: reduce) {
    #omslb.omslb-open, #omslb .omsv-img, #omslb .omsv-th, #omslb .omsv-toast { animation: none; transition: none; }
}