/* Фото кабинета и салона на странице записи (22.10.2026, public/js/inside.js):
   общее у страницы мастера (/m/) и салона (/s/). Цвета ряда — токены темы
   страницы с запасными значениями темы по умолчанию (кольцо — цвет действия
   темы, `--green`), просмотр всегда тёмный, как просмотр работ (.wkb). */

/* Ряд кружков под адресом */
.ins { margin: 12px 0 0; min-width: 0; }
.ins__lbl { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1.3;
  color: var(--ink-3, #875a69); }
.ins__row { display: flex; gap: 10px; margin: 0 -4px; padding: 2px 4px 4px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ins__row::-webkit-scrollbar { display: none; }
.ins__b { flex: none; display: block; width: 56px; height: 56px; padding: 2px; box-sizing: border-box; cursor: pointer;
  border: 2px solid var(--green, #3a7233); border-radius: 50%; background: var(--card, #fffbfc); scroll-snap-align: start;
  transition: transform .16s ease, border-color .2s ease; -webkit-tap-highlight-color: transparent; }
.ins__b img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--line, #f0dde4); }
.ins__b:hover { transform: scale(1.04); }
.ins__b:active { transform: scale(.96); }
.ins__b:focus-visible { outline: 2px solid var(--green, #3a7233); outline-offset: 2px; }
.ins__b[hidden] { display: none; }
/* Уже смотрели в этот заход — кольцо тихое, как у просмотренных сторис */
.ins__b--seen { border-color: var(--line, #f0dde4); }

/* Просмотр во весь экран */
html.insv-lock, html.insv-lock body { overflow: hidden; }
.insv { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 8, 9, .96); color: #fff; animation: insvIn .18s ease both; }
.insv__box { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden;
  background: #0d0b0c; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); box-sizing: border-box;
  transition: transform .2s ease; }
/* Размытое превью под снимком: горизонтальный кадр не висит на чёрном */
/* max-width: none — общие стили страниц держат картинки в ширину блока */
.insv__bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none; max-height: none; object-fit: cover;
  filter: blur(28px) brightness(.45) saturate(1.1); pointer-events: none; }
.insv__bars { position: relative; z-index: 2; display: flex; gap: 4px; padding: 10px 12px 0; }
.insv__bar { flex: 1; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .32); }
.insv__bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }
.insv__bar.is-done i { width: 100%; }
/* Текущая: заполняется за 5 секунд, когда снимок загрузился (is-run); удержание — пауза */
.insv.is-run .insv__bar.is-on i { animation: insvFill 5s linear forwards; }
.insv.is-hold .insv__bar.is-on i { animation-play-state: paused; }
/* «Уменьшить движение»: сам не листает, текущая полоска просто закрашена */
.insv.is-calm .insv__bar.is-on i { width: 100%; animation: none; }
.insv__top { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 8px 6px 12px; }
.insv__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.insv__ph { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .12); }
.insv__t { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.insv__t b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insv__t small { font-size: 12.5px; opacity: .8; }
.insv__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }
.insv__ic:hover { background: rgba(255, 255, 255, .22); }
.insv__ic:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.insv__stage { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.insv__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  pointer-events: none; -webkit-user-drag: none; }
/* Невидимые половины для листания: слева треть — назад, остальное — вперёд.
   Значок стрелки виден только у мыши (наведение) и с клавиатуры (фокус). */
.insv__tap { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 12px; margin: 0;
  border: 0; background: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.insv__tap--p { left: 0; width: 33.4%; justify-content: flex-start; }
.insv__tap--n { right: 0; width: 66.6%; justify-content: flex-end; }
.insv__tap span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(10, 8, 9, .45); opacity: 0; transition: opacity .16s ease; }
.insv__tap:focus-visible { outline: none; }
.insv__tap:focus-visible span { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .insv__stage:hover .insv__tap span { opacity: .85; }
}
.insv__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Компьютер: окно по центру, вокруг затемнение (нажатие по нему закрывает) */
@media (min-width: 768px) {
  .insv { padding: 24px; box-sizing: border-box; }
  .insv__box { width: min(100%, 1040px); height: min(100%, 780px); border-radius: 16px; padding: 0;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }
  .insv__bars { padding: 14px 16px 0; }
  .insv__top { padding: 10px 12px 8px 16px; }
  .insv__stage { padding: 0 8px 16px; }
}
@keyframes insvFill { from { width: 0; } to { width: 100%; } }
@keyframes insvIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .insv, .insv__box, .ins__b, .insv__tap span { animation: none; transition: none; }
  .ins__b:hover, .ins__b:active { transform: none; }
}