/* Просмотр фото на весь экран. Фон всегда тёмный (как в галерее телефона) в обеих темах. */
.pv{position:fixed;inset:0;z-index:25;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  --pv-a:1;opacity:0;transition:opacity .2s ease-out;color:#fff;overscroll-behavior:contain}
.pv.on{opacity:1}
.pv.off{opacity:0;pointer-events:none}
.pv-bg{position:absolute;inset:0;background:#000;opacity:calc(.94 * var(--pv-a))}
.pv-track{position:absolute;inset:0;will-change:transform}
.pv-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:transform}
.pv-slide.empty{visibility:hidden}
.pv-slide img{display:block;max-width:none;max-height:none;transform-origin:50% 50%;will-change:transform;
  -webkit-user-drag:none;-webkit-touch-callout:none;pointer-events:auto;background:rgba(255,255,255,.04)}
.pv-slide img:not([style*="width"]){max-width:100%;max-height:100%}
.pv-spin{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:var(--accent2);animation:pvspin .8s linear infinite;display:none}
.pv-slide.loading .pv-spin{display:block}
.pv-slide.bad::after{content:"Фото не загрузилось";position:absolute;color:rgba(255,255,255,.75);font-size:15px}
.pv-slide.bad img{display:none}
@keyframes pvspin{to{transform:rotate(360deg)}}

.pv-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 18px calc(12px + env(safe-area-inset-left));
  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));transition:opacity .2s;opacity:var(--pv-a)}
.pv-cap{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pv-cap b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-cap span{font-size:12.5px;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-n{font:600 14px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.9);white-space:nowrap}
.pv-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 12px;
  border-radius:22px;border:0;background:rgba(255,255,255,.14);color:#fff;font:600 14px/1 system-ui,sans-serif;cursor:pointer;
  text-decoration:none;-webkit-tap-highlight-color:transparent}
.pv-btn:hover{background:rgba(255,255,255,.24)}
.pv-btn:focus-visible,.pv-nav:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.pv-btn svg{width:20px;height:20px}
.pv-btn[data-pv=close]{font-size:18px;padding:0}
.pv-nav{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:0;background:rgba(255,255,255,.14);
  color:#fff;font-size:34px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 4px;transition:opacity .2s}
.pv-nav:hover{background:rgba(255,255,255,.26)}
.pv-nav.prev{left:calc(16px + env(safe-area-inset-left))}
.pv-nav.next{right:calc(16px + env(safe-area-inset-right))}
.pv.bare .pv-top,.pv.bare .pv-nav{opacity:0;pointer-events:none}
.pv.zoomed .pv-nav{opacity:.35}
@media (hover:none),(max-width:860px){
  .pv-nav{display:none}          /* на телефоне листаем пальцем */
  .pv-btn span{display:none}
  .pv-btn.pv-dl{padding:0}
}
/* фото в чатах и отчётах — видно, что их можно открыть */
.msg a > img,.media a > img{cursor:zoom-in}