/* lainRuShot — просмотр картинок (лайтбокс) lainru.org. Собственная реализация проекта lainJS. */

html.lrshot-lock {
    overflow: hidden;
}

html.lrshot-lock body {
    padding-right: var(--lrshot-scrollbar, 0px);
}

.lrshot {
    --lrshot-bg: rgba(8, 11, 16, .94);
    --lrshot-fg: #eef1f6;
    --lrshot-muted: #aeb5bf;
    --lrshot-accent: #8c99b8;
    --lrshot-thumbs-h: 84px;
    --lrshot-top-h: 56px;

    position: fixed;
    inset: 0;
    z-index: 999999;   /* выше полосы прогресса чтения (999998) */
    color: var(--lrshot-fg);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    opacity: 0;
    transition: opacity .2s ease;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.lrshot--in {
    opacity: 1;
}

.lrshot--out {
    opacity: 0;
    pointer-events: none;
}

.lrshot__backdrop {
    position: absolute;
    inset: 0;
    background: var(--lrshot-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ---------- сцена и панели */
.lrshot__stage {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--lrshot-top-h);
    bottom: 48px;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
}

.lrshot--thumbs .lrshot__stage {
    bottom: calc(var(--lrshot-thumbs-h) + 48px);
}

.lrshot--single .lrshot__stage {
    bottom: 48px;
}

.lrshot--zoomed .lrshot__stage {
    cursor: grab;
}

.lrshot--zoomed .lrshot__stage:active {
    cursor: grabbing;
}

.lrshot__track {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.lrshot__pane {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lrshot__pane--empty {
    visibility: hidden;
}

.lrshot__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50% 50%;
    will-change: transform;
}

.lrshot__img {
    display: block;
    max-width: none;
    max-height: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
    background: rgba(255, 255, 255, .03);
    pointer-events: auto;
}

/* пока грузится оригинал — видно, как он проявляется; под ним растянуто превью */
.lrshot__img {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.lrshot__pane--loading .lrshot__img {
    max-width: 100%;
    max-height: 100%;
}

/* размер ещё неизвестен — не даём картинке вылезти за свою панель на соседние */
.lrshot__pane:not(.lrshot__pane--sized) .lrshot__img {
    max-width: 100%;
    max-height: 100%;
}

.lrshot__spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 3px solid rgba(0, 0, 0, .5);
    border-top-color: var(--lrshot-fg);
    border-radius: 50%;
    animation: lrshot-spin .8s linear infinite;
    display: none;
    pointer-events: none;
}

.lrshot__pane--loading .lrshot__spinner {
    display: block;
}

@keyframes lrshot-spin {
    to {
        transform: rotate(360deg);
    }
}

.lrshot__error {
    position: absolute;
    display: none;
    padding: 10px 16px;
    color: var(--lrshot-muted);
    font-size: 15px;
    background: rgba(0, 0, 0, .5);
}

.lrshot__pane--error .lrshot__error {
    display: block;
}

.lrshot__pane--error .lrshot__img {
    display: none;
}

/* ---------- верхняя панель */
.lrshot__top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--lrshot-top-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 18px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), transparent);
    transition: opacity .2s, transform .2s;
}

.lrshot__counter {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--lrshot-muted);
    letter-spacing: .02em;
}

.lrshot__tools {
    display: flex;
    gap: 2px;
}

.lrshot__btn,
.lrshot__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--lrshot-fg);
    cursor: pointer;
    opacity: .82;
    transition: opacity .15s, background-color .15s;
}

.lrshot__btn:hover,
.lrshot__nav:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .08);
}

.lrshot__btn:focus-visible,
.lrshot__nav:focus-visible,
.lrshot__thumb:focus-visible {
    outline: 2px solid var(--lrshot-accent);
    outline-offset: -2px;
}

.lrshot__btn[disabled],
.lrshot__nav[disabled] {
    opacity: .25;
    cursor: default;
    background: transparent;
}

.lrshot svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lrshot__btn[data-act="play"] svg path:only-child[d^="M8 5v14l"] {
    fill: currentColor;
}

.lrshot--single .lrshot__btn[data-act="play"],
.lrshot--single .lrshot__btn[data-act="thumbs"],
.lrshot--single .lrshot__nav {
    display: none;
}

.lrshot--playing .lrshot__btn[data-act="play"] {
    color: var(--lrshot-accent);
}

/* ---------- стрелки */
.lrshot__nav {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 72px;
    margin-top: -36px;
}

.lrshot__nav--prev {
    left: 8px;
}

.lrshot__nav--next {
    right: 8px;
}

.lrshot__nav svg {
    width: 30px;
    height: 30px;
}

/* ---------- подпись и превью */
.lrshot__bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 8px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent);
    transition: opacity .2s, transform .2s;
}

.lrshot__caption {
    max-width: min(900px, 92vw);
    min-height: 40px;
    padding: 10px 16px 8px;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    color: var(--lrshot-fg);
    overflow-wrap: anywhere;
}

.lrshot__caption[hidden] {
    display: block;
    visibility: hidden;
}

.lrshot__thumbs {
    display: none;
    width: 100%;
    height: var(--lrshot-thumbs-h);
    padding: 6px 12px;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.lrshot__thumbs::-webkit-scrollbar {
    display: none;
}

.lrshot--thumbs .lrshot__thumbs {
    display: flex;
}

.lrshot--single .lrshot__thumbs {
    display: none;
}

.lrshot__thumb {
    flex: none;
    width: 32px;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
    opacity: .5;
    transition: opacity .15s, box-shadow .15s;
}

.lrshot__thumb:first-child {
    margin-left: auto;
}

.lrshot__thumb:last-child {
    margin-right: auto;
}

.lrshot__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.lrshot__thumb:hover {
    opacity: .85;
}

.lrshot__thumb--active {
    width: 64px;
    opacity: 1;
    box-shadow: 0 0 0 2px var(--lrshot-fg);
    margin: 0 10px;
}

/* ---------- спрятанные панели (тап по картинке на телефоне) */
.lrshot--bare .lrshot__top {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.lrshot--bare .lrshot__bottom,
.lrshot--bare .lrshot__nav {
    opacity: 0;
    pointer-events: none;
}

.lrshot--zoomed .lrshot__nav {
    opacity: .15;
}

/* ---------- телефоны */
@media (max-width: 700px), (pointer: coarse) {
    .lrshot {
        --lrshot-thumbs-h: 64px;
        --lrshot-top-h: 48px;
    }

    .lrshot__stage {
        top: 0;
        bottom: 0;
    }

    .lrshot--thumbs .lrshot__stage,
    .lrshot--single .lrshot__stage {
        top: 0;
        bottom: 0;
    }

    .lrshot__nav {
        display: none;
    }

    .lrshot__btn[data-act="full"] {
        display: none;
    }

    .lrshot__thumb {
        width: 40px;
    }

    .lrshot__caption {
        font-size: 14px;
        min-height: 0;
    }

    .lrshot__img {
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lrshot,
    .lrshot__track,
    .lrshot__frame {
        transition: none !important;
    }
}

/* ---------- анимация «из превью / в превью» */
.lrshot--zoom {
    opacity: 1;
    transition: none;
}

.lrshot__backdrop,
.lrshot--zoom .lrshot__top,
.lrshot--zoom .lrshot__bottom,
.lrshot--zoom .lrshot__nav {
    transition: opacity .3s ease;
}

.lrshot--zoom:not(.lrshot--in) .lrshot__backdrop,
.lrshot--zoom:not(.lrshot--in) .lrshot__top,
.lrshot--zoom:not(.lrshot--in) .lrshot__bottom,
.lrshot--zoom:not(.lrshot--in) .lrshot__nav,
.lrshot--zoom:not(.lrshot--in) .lrshot__spinner {
    opacity: 0;
}

.lrshot--zoomout {
    pointer-events: none;
}

.lrshot--zoom .lrshot__img {
    box-shadow: none;
}