/* ============================================================================
   Слайдер изображений для постов и комментариев.

   Появляется там, где в одном посте/комментарии больше одной картинки:
   под контентом рисуется кнопка «Посмотреть в слайдере», по ней открывается
   полноэкранный тёмный просмотрщик с точками, стрелками и счётчиком «1/10».

   Слой всегда тёмный независимо от темы сайта: под фотографией нужен
   нейтральный фон, а не подложка интерфейса.
   ============================================================================ */

/* --- Кнопка под контентом ------------------------------------------------- */
.pis-open-btn{
    display:inline-flex;align-items:center;gap:8px;
    margin:2px 5px 10px;padding:8px 14px;
    font:inherit;font-size:.9em;line-height:1.2;
    color:#897ece;background:rgba(137,126,206,.10);
    border:1px solid rgba(137,126,206,.35);border-radius:999px;
    cursor:pointer;transition:background .2s,border-color .2s,transform .15s,box-shadow .2s;
    -webkit-tap-highlight-color:transparent;
}
.pis-open-btn:hover{background:rgba(137,126,206,.18);border-color:rgba(137,126,206,.6);box-shadow:0 4px 14px rgba(137,126,206,.18)}
.pis-open-btn:active{transform:scale(.97)}
.pis-open-btn:focus-visible{outline:2px solid #897ece;outline-offset:2px}
.pis-open-btn svg{width:16px;height:16px;flex:0 0 auto}
/* В пузыре сообщения места меньше, чем в посте: убираем боковые отступы и
   поджимаем шрифт, чтобы кнопка не растягивала сообщение по ширине. */
.message-content > .pis-open-btn{margin:0 0 8px;padding:5px 10px;font-size:.85em;gap:6px;float:right}
/* В окне «Медиа» кнопка — отдельная строка над сеткой */
.dialog-media-slider-btn{margin:0 0 12px}

/* --- Кнопка в шапке публикации -------------------------------------------- */
/* Значок и счётчик без подписи: в шапке рядом со ссылкой на публикацию слово
   «Посмотреть в слайдере» переносило бы строку на узких экранах. Смысл держат
   значок, число картинок и подсказка при наведении. */
.pis-open-btn.pis-in-header{
    margin:0 0 0 6px;padding:4px 8px;gap:5px;font-size:.85em;
    align-self:center;flex:0 0 auto;
}
.pis-open-btn.pis-in-header svg{width:15px;height:15px}
/* Правую группу шапки к краю прижимал авто-отступ ссылки (.post-id/.comment-id
   в posts.css). Кнопка встала перед ней, значит отступ переезжает на кнопку —
   иначе два авто-отступа поделят свободное место и растащат значки по разным
   углам шапки. */
.post-header > .pis-open-btn.pis-in-header,
.comment-header > .pis-open-btn.pis-in-header,
.comment-header-row > .pis-open-btn.pis-in-header{margin-left:auto;align-self:center}
.pis-open-btn.pis-in-header + .post-id,
.pis-open-btn.pis-in-header + .comment-id{margin-left:5px}
/* В заметке кнопка встаёт первой в готовую группу значков — там место
   распределяет сама группа, авто-отступ не нужен */
.note-actions > .pis-open-btn.pis-in-header{margin:0 4px 0 0}
/* На узких экранах эта шапка складывается в колонку (profile.css), и авто-отступ
   слева уже ничего не двигает — прижимаем кнопку к правому краю сам себе. */
@media (max-width:768px){
    .comment-header-row > .pis-open-btn.pis-in-header{align-self:flex-end;margin:2px 0 0 auto}
}

/* На узкой шапке кнопка уходит в конец группы и при нехватке места переносится
   вниз — под ссылку на публикацию. Переносится именно она: значок ссылки узкий
   и постоянный, а эта кнопка шире (значок + счётчик) и появляется не у каждой
   публикации, так что её перенос не двигает привычные действия. На широком
   экране порядок прежний — кнопка первая в группе. */
@media (max-width:600px){
    .post-header > .pis-open-btn.pis-in-header,
    .comment-header > .pis-open-btn.pis-in-header{order:4;margin:0 0 0 6px}
    .note-actions > .pis-open-btn.pis-in-header{order:1;margin:0 0 0 4px}
    /* Кнопка ушла в конец группы, значит прижимать её к правому краю снова
       нечем — авто-отступ возвращается ссылке (выше он у неё снят, потому что
       на широком экране это делает сама кнопка). */
    .pis-open-btn.pis-in-header + .post-id,
    .pis-open-btn.pis-in-header + .comment-id{margin-left:auto}
}
.pis-open-btn .pis-open-count{
    padding:1px 7px;border-radius:16px;font-size:.85em;
    background:rgba(137,126,206,.22);
	line-height:1.4;
}

/* --- Оверлей -------------------------------------------------------------- */
.pis-overlay{
    position:fixed;inset:0;z-index:1000000;
    display:none;
    background:rgba(6,6,10,.94);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    opacity:0;transition:opacity .28s ease;
    overscroll-behavior:contain;touch-action:none;
    -webkit-tap-highlight-color:transparent;
    user-select:none;-webkit-user-select:none;
}
.pis-overlay.pis-open{display:block}
.pis-overlay.pis-visible{opacity:1}

/* Полотно со слайдами */
.pis-viewport{position:absolute;inset:0;overflow:hidden}
.pis-track{display:flex;height:100%;will-change:transform}
.pis-track.pis-animate{transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.pis-slide{
    flex:0 0 100%;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    padding:64px 12px 92px;box-sizing:border-box;position:relative;
}
.pis-slide img{
    max-width:100%;max-height:100%;
    object-fit:contain;display:block;
    border-radius:10px;
    box-shadow:0 10px 40px rgba(0,0,0,.55);
    transform-origin:center center;
    cursor:zoom-in;
    -webkit-user-drag:none;user-drag:none;pointer-events:auto;
}
.pis-slide.pis-zoomed img{cursor:grab}
.pis-slide.pis-grabbing img{cursor:grabbing}

/* Заглушка загрузки */
.pis-spinner{display:none;
    position:absolute;width:34px;height:34px;border-radius:50%;
    border:3px solid rgba(255,255,255,.2);border-top-color:rgba(255,255,255,.85);
    animation:pis-spin .8s linear infinite;
}
.pis-slide.pis-loading .pis-spinner{display:block}
.pis-slide.pis-loaded .pis-spinner{display:none}
@keyframes pis-spin{to{transform:rotate(360deg)}}

/* --- Верхняя панель ------------------------------------------------------- */
.pis-topbar{
    position:absolute;top:0;left:0;right:0;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 16px;
    background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));
    opacity:0;transform:translateY(-8px);
    transition:opacity .3s ease .05s,transform .3s ease .05s;
    pointer-events:none;
}
.pis-overlay.pis-visible .pis-topbar{opacity:1;transform:none}
.pis-topbar > *{pointer-events:auto}
.pis-counter{
    color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;
    padding:6px 12px;border-radius:999px;
    background:rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    font-variant-numeric:tabular-nums;
}
.pis-btn{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;
    color:#fff;background:rgba(255,255,255,.12);
    border:none;border-radius:50%;cursor:pointer;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transition:background .2s,transform .15s,opacity .2s;
}
.pis-btn:hover{background:rgba(255,255,255,.24)}
.pis-btn:active{transform:scale(.92)}
.pis-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pis-btn svg{width:20px;height:20px}
.pis-btn[disabled]{opacity:.25;cursor:default;pointer-events:none}

/* --- Боковые стрелки ------------------------------------------------------ */
.pis-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:46px;height:46px;
    opacity:0;transition:opacity .3s ease,background .2s,transform .15s;
}
.pis-overlay.pis-visible .pis-nav{opacity:1}
/* На первом кадре стрелка «назад» и на последнем «вперёд» не просто гаснут,
   а убираются совсем: приглушённая кнопка выглядит как сбой, а не как край
   ленты. Селектор длиннее правила выше — иначе оно перебьёт скрытие. */
.pis-overlay.pis-visible .pis-nav[disabled]{opacity:0;visibility:hidden}
.pis-overlay.pis-visible .pis-nav:active{transform:translateY(-50%) scale(.92)}
.pis-nav-prev{left:14px}
.pis-nav-next{right:14px}
/* Много снимков — точки прячем: полтысячи кнопок под пальцем бесполезны,
   ориентир даёт счётчик «12/348» (см. renderDots в image-slider.js) */
.pis-overlay.pis-nodots .pis-dots{display:none}
.pis-overlay.pis-single .pis-nav,
.pis-overlay.pis-single .pis-dots{display:none}

/* --- Точки ---------------------------------------------------------------- */
.pis-dots{
    position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
    display:flex;align-items:center;gap:8px;
    max-width:min(90vw,520px);padding:8px 12px;
    border-radius:999px;background:rgba(255,255,255,.10);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    overflow-x:auto;scrollbar-width:none;
    opacity:0;transform:translate(-50%,10px);
    transition:opacity .3s ease .05s,transform .3s ease .05s;
}
.pis-dots::-webkit-scrollbar{display:none}
.pis-overlay.pis-visible .pis-dots{opacity:1;transform:translateX(-50%)}
.pis-dot{
    flex:0 0 auto;width:8px;height:8px;padding:0;
    border:none;border-radius:999px;background:rgba(255,255,255,.4);
    cursor:pointer;transition:width .28s cubic-bezier(.22,.61,.36,1),background .25s,transform .2s;
}
.pis-dot:hover{background:rgba(255,255,255,.7)}
.pis-dot.pis-dot-active{width:22px;background:#fff}
.pis-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* --- Подпись под изображением --------------------------------------------- */
/* Первый абзац, написанный под картинкой в публикации (см. captionFor в
   image-slider.js). Панель одна на весь слой и стоит над точками: она не едет
   вместе с лентой и не мешает свайпу.

   По умолчанию видно две строки — этого хватает, чтобы понять, что на снимке;
   остальное раскрывает кнопка «Ещё». Пока подписи нет, панель не занимает
   места вообще, и кадр остаётся такой же высоты, как раньше. */
.pis-caption{
    position:absolute;left:50%;bottom:60px;transform:translate(-50%,10px);
    display:none;align-items:flex-end;gap:10px;
    width:max-content;max-width:min(92vw,760px);
    padding:10px 14px;box-sizing:border-box;
    border-radius:14px;
    background:rgba(18,18,24,.62);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:0 6px 24px rgba(0,0,0,.35);
    opacity:0;transition:opacity .3s ease .05s,transform .3s ease .05s;
    pointer-events:none;
}
.pis-overlay.pis-has-caption .pis-caption{display:flex}
.pis-overlay.pis-has-caption.pis-visible .pis-caption{opacity:1;transform:translateX(-50%);pointer-events:auto}
/* Увеличенный кадр разглядывают целиком — подпись на это время уходит */
.pis-overlay.pis-zoomed-view .pis-caption{opacity:0;pointer-events:none;transform:translate(-50%,10px)}
.pis-caption-text{
    margin:0;min-width:0;
    color:rgba(255,255,255,.92);
    font-size:14px;line-height:1.45;
    text-align:left;overflow-wrap:anywhere;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
/* Раскрытая подпись выше двух строк, но не во весь экран: под длинным текстом
   картинка перестала бы быть главной. Дальше — прокрутка внутри панели. */
.pis-overlay.pis-caption-open .pis-caption{background:rgba(12,12,18,.82)}
.pis-overlay.pis-caption-open .pis-caption-text{
    -webkit-line-clamp:unset;display:block;
    max-height:min(32vh,220px);overflow-y:auto;
    overscroll-behavior:contain;scrollbar-width:thin;
}
.pis-caption-more{
    flex:0 0 auto;display:none;padding:3px 10px;
    font:inherit;font-size:12.5px;line-height:1.5;font-weight:600;
    color:#fff;background:rgba(255,255,255,.14);
    border:none;border-radius:999px;cursor:pointer;
    transition:background .2s,transform .15s;
}
/* Кнопку показываем, только если текст правда не поместился (класс ставит
   updateCaption после замера высоты) */
.pis-overlay.pis-caption-clamped .pis-caption-more{display:block}
.pis-caption-more:hover{background:rgba(255,255,255,.26)}
.pis-caption-more:active{transform:scale(.94)}
.pis-caption-more:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Кадру нужно место под панель, иначе высокая фотография уезжает под неё.
   Добавка ровно на высоту подписи и только когда подпись есть. */
.pis-overlay.pis-has-caption .pis-slide{padding-bottom:150px}
/* Без точек (один снимок или их слишком много) нижний край свободен —
   панель опускается, отдавая картинке ещё немного высоты. */
.pis-overlay.pis-single .pis-caption,
.pis-overlay.pis-nodots .pis-caption{bottom:24px}
.pis-overlay.pis-single.pis-has-caption .pis-slide,
.pis-overlay.pis-nodots.pis-has-caption .pis-slide{padding-bottom:120px}

/* --- Жест «смахнуть вниз» ------------------------------------------------- */
.pis-overlay.pis-dismissing .pis-topbar,
.pis-overlay.pis-dismissing .pis-dots,
.pis-overlay.pis-dismissing .pis-caption,
.pis-overlay.pis-dismissing .pis-nav{opacity:0;transition:opacity .15s ease}

/* --- Адаптив -------------------------------------------------------------- */
@media (max-width:768px){
    .pis-slide{padding:56px 0 78px}
    /* На телефоне панель во всю ширину: обрезанная по содержимому плашка
       посреди экрана выглядит случайной, а места и так мало. */
    .pis-caption{
        left:12px;right:12px;bottom:52px;width:auto;max-width:none;
        transform:translateY(10px);padding:9px 12px;gap:8px;
    }
    .pis-overlay.pis-has-caption.pis-visible .pis-caption{transform:none}
    .pis-overlay.pis-zoomed-view .pis-caption{transform:translateY(10px)}
    .pis-caption-text{font-size:13.5px}
    .pis-overlay.pis-has-caption .pis-slide{padding-bottom:132px}
    .pis-slide img{border-radius:6px}
    .pis-nav{display:none}
    .pis-dots{bottom:16px;gap:7px;padding:7px 10px}
    .pis-btn{width:38px;height:38px}
    .pis-counter{font-size:13px;padding:5px 10px}
}
@media (hover:none){
    .pis-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
    .pis-overlay,.pis-track.pis-animate,.pis-topbar,.pis-dots,.pis-dot,.pis-caption{transition-duration:.01ms}
}