/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Окно «Предпросмотр ролика» (modules-reels-preview.js, макет docs/reels-nav/b2/preview.html). Классы rv-…: rv — окно, rv-ov — подложка,
   rv-seg — переключатель вариантов, rv-cover и rv-frame — обложка, rv-zoom — обложка крупно.
   Одна сетка: у шапки, прокручиваемого тела и подвала один боковой отступ --rv-pad, между блоками один промежуток --rv-gap.
   Значения — только из tokens.css, размеры в rem; вместо рамок — мягкое свечение (--shadow-ring, --shadow-lg). На ≥768 окно сбоку, на телефоне — весь экран. */

.rv-ov {
  --rv-pad: var(--space-6); --rv-gap: var(--space-6); --rv-player-w: 13.5rem; --rv-thumb-w: 5rem;
  position: fixed; inset: 0; z-index: var(--z-modal); visibility: hidden; pointer-events: none;
  transition: visibility 0s linear var(--duration-base);
}
.rv-ov[data-open="true"] { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.rv-ov__scrim { position: absolute; inset: 0; background: var(--color-scrim); opacity: 0; transition: opacity var(--duration-base) var(--ease-out); }
.rv-ov[data-open="true"] .rv-ov__scrim { opacity: 1; }
/* Пока окно открыто, полоса прокрутки страницы и её резерв (scrollbar-gutter в base.css) убираются: иначе справа остаётся щель шириной в полосу,
   и окно не доходит до края. Страница под окном при этом не прокручивается. */
html:has(.rv-ov[data-open="true"]) { overflow: hidden; scrollbar-gutter: auto; }

.rv {
  position: absolute; inset-block: 0; inset-inline-end: 0; display: flex; flex-direction: column; min-height: 0; width: min(40rem, 100%); box-sizing: border-box;
  background: var(--color-panel); color: var(--color-ink); outline: none;
  box-shadow: var(--shadow-lg), 0 0 4rem -1.5rem var(--color-acc-glow);
  transform: translateX(100%); transition: transform var(--duration-base) var(--ease-out);
}
.rv-ov[data-open="true"] .rv { transform: none; }

/* ---------- Шапка ---------- */
.rv__h { display: grid; gap: var(--space-2); padding: var(--space-3) var(--rv-pad); }
.rv__back {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch-min); margin-inline-start: calc(var(--space-3) * -1);
  padding: 0 var(--space-3); border: 0; border-radius: var(--radius-ctl); background: none; color: var(--color-ink2); cursor: pointer;
  font: var(--text-button-weight) var(--text-button-size)/var(--text-button-line) var(--text-button-family);
}
.rv__back:hover { color: var(--color-ink); background: var(--color-panel2); }
.rv__ht { display: grid; gap: var(--space-2); min-width: 0; }
.rv__t { margin: 0; overflow-wrap: anywhere; font: var(--text-h2-weight) var(--text-h2-size)/var(--text-h2-line) var(--text-h2-family); letter-spacing: var(--text-h2-track); }
.rv__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }

/* ---------- Тело: одна колонка блоков с общим отступом ---------- */
.rv__b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--rv-gap); align-content: start; padding: var(--space-2) var(--rv-pad) var(--rv-pad); }
.rv__sec { display: grid; gap: var(--space-3); min-width: 0; align-content: start; }
.rv__sh { margin: 0; color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--text-ui-strong-family); }
.rv__dim { margin: 0; color: var(--color-ink2); overflow-wrap: anywhere; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--text-caption-family); }

/* ---------- Варианты ---------- */
.rv__var { display: flex; align-items: center; gap: var(--space-3); }
.rv__var[hidden] { display: none; }
.rv__varl { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/1 var(--text-caption-family); }
.rv-seg { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-ctl); background: var(--color-track); }
.rv-seg__b {
  min-width: var(--size-touch-min); min-height: var(--size-touch-min); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-xs); background: none; color: var(--color-ink2); cursor: pointer;
  font: var(--text-button-weight) var(--text-button-size)/var(--text-button-line) var(--text-button-family);
}
.rv-seg__b:hover { color: var(--color-ink); }
.rv-seg__b[aria-checked="true"] { background: var(--color-panel); color: var(--color-ink); box-shadow: var(--shadow-sm), var(--shadow-ring); }

/* ---------- Верх: плеер и шкала слева (одной ширины), сведения справа ---------- */
.rv__top { display: grid; grid-template-columns: var(--rv-player-w) minmax(0, 1fr); gap: var(--rv-gap); align-items: start; }
.rv__player { min-width: 0; }
.rv .rl-player__stage { display: grid; gap: var(--space-2); min-width: 0; }
.rv .rl-video { width: 100%; height: auto; max-height: none; aspect-ratio: 9 / 16; margin: 0; border: 0; border-radius: var(--radius-ctl); box-shadow: var(--shadow-ring); }
.rv .rl-timeline { width: 100%; box-sizing: border-box; }
.rv__meta { display: grid; gap: var(--space-3); margin: 0; min-width: 0; align-content: start; }
.rv__meta[hidden] { display: none; }
.rv__meta-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.rv__meta dt { color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--text-caption-family); }
.rv__meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--text-caption-family); }
.rv-tone--warn { color: var(--color-warn-text); font-weight: var(--weight-medium); }
.rv-tone--ok { color: var(--color-ok-text); }

/* ---------- Обложка ---------- */
.rv-cover__row { display: grid; grid-template-columns: var(--rv-thumb-w) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.rv-cover__info { display: grid; gap: var(--space-2); justify-items: start; min-width: 0; }
.rv-cover__thumb {
  display: block; width: 100%; min-width: var(--size-touch-min); padding: 0; border: 0; border-radius: var(--radius-ctl); background: none; color: inherit; cursor: zoom-in;
}
.rv-cover__thumb:hover { box-shadow: var(--shadow-glow); }
.rv-cover__acts { display: grid; gap: var(--space-3); }
.rv-cover__off { margin: 0; }
.rv__btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rv__btns .btn { min-height: var(--size-touch-min); }
.rv__btns .btn:disabled { opacity: .5; cursor: not-allowed; }
.rv__field { display: grid; gap: var(--space-2); }
.rv__label { color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-caption-size)/var(--text-caption-line) var(--text-ui-strong-family); }
.rv__input {
  width: 100%; min-width: 0; min-height: var(--size-touch-min); padding: var(--space-3) var(--space-4); box-sizing: border-box; border: 0; border-radius: var(--radius-ctl);
  background: var(--color-panel); color: var(--color-ink); box-shadow: var(--shadow-ring); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--text-ui-family);
}
.rv__input[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--color-danger); }

.rv-frame {
  position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius-ctl); color: var(--color-ink); box-shadow: var(--shadow-ring);
  background: radial-gradient(circle at 28% 18%, var(--color-acc-glow), transparent 60%), var(--color-bg2);
}
.rv-frame__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv-frame__cap {
  position: absolute; inset-inline: var(--space-2); bottom: var(--space-4); margin: 0; overflow: hidden; text-wrap: balance;
  font: var(--weight-medium) var(--text-label-size)/1.25 var(--font-head); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
/* Заглушка без картинки: подпись целиком (перенос, в том числе длинного слова), без обрезки в три точки. */
.rv-frame[data-has-image="false"] .rv-frame__cap { display: block; overflow: visible; inset-inline: var(--space-1); overflow-wrap: anywhere; hyphens: auto; }
.rv-frame--big { width: auto; max-width: 100%; height: min(75vh, 40rem); }
.rv-frame--big[data-has-image] .rv-frame__cap { inset-inline: var(--space-4); bottom: var(--space-8); font-size: var(--text-h3-size); }

/* Обложка крупно: слой поверх окна, фон и кнопка закрывают его */
.rv-zoom { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: var(--rv-pad); }
.rv-zoom[hidden] { display: none; }
.rv-zoom__scrim { position: absolute; inset: 0; background: var(--color-scrim); }
.rv-zoom__in { position: relative; display: grid; place-items: center; max-width: 100%; box-shadow: var(--shadow-lg), 0 0 4rem -1rem var(--color-acc-glow); border-radius: var(--radius-ctl); }
.rv-zoom__x { position: absolute; top: var(--space-3); inset-inline-end: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch-min); }

/* ---------- Подпись и хэштеги: панель rl-cap без своих рамок и отступов, в общей сетке ---------- */
.rv .rl-cap { padding: 0; border: 0; border-radius: 0; background: none; gap: var(--space-3); }
.rv .rl-cap__h { color: var(--color-ink); font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--text-ui-strong-family); text-transform: none; letter-spacing: normal; }
.rv .rl-cap__tag { border: 0; background: var(--color-panel2); color: var(--color-ink); }

/* ---------- Комментарии ---------- */
.rv__list { display: grid; gap: var(--space-2); min-width: 0; }
.rv__form { min-width: 0; }
.rv .rl-c__b { border: 0; box-shadow: var(--shadow-ring); }
.rv .rl-c__seek:hover { border: 0; box-shadow: var(--shadow-ring), var(--shadow-glow); }
.rv .rl-comment-input { border: 0; box-shadow: var(--shadow-ring); }
.rv .rl-comment-btn { border: 0; box-shadow: var(--shadow-ring); }

/* ---------- Подвал: статус и главные кнопки ---------- */
.rv__f {
  display: grid; gap: var(--space-3); padding: var(--space-4) var(--rv-pad) calc(var(--space-4) + env(safe-area-inset-bottom)); background: var(--color-panel);
  box-shadow: 0 -1.25rem 1.5rem -1.25rem var(--color-scrim);
}
.rv__open { margin: 0; color: var(--color-ink2); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--text-caption-family); font-variant-numeric: var(--num-features); }
.rv .rv__acts { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }
.rv .rv__acts .btn { flex: 1 1 10rem; width: auto; min-height: var(--size-touch-min); }
.rv__acts .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Фокус ---------- */
.rv__back:focus-visible, .rv-seg__b:focus-visible, .rv-cover__thumb:focus-visible, .rv__input:focus-visible, .rv-zoom__x:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }

/* ---------- Телефон: весь экран, колонки в одну ---------- */
@media (max-width: 47.9375rem) {
  .rv-ov { --rv-pad: var(--space-4); --rv-gap: var(--space-4); }
  .rv { width: 100%; transform: translateY(var(--space-8)); opacity: 0; transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); }
  .rv-ov[data-open="true"] .rv { transform: none; opacity: 1; }
  .rv__top { grid-template-columns: minmax(0, 1fr); }
  .rv__player { width: min(100%, 15rem); justify-self: center; }
  .rv__meta-row { grid-template-columns: 7rem minmax(0, 1fr); }
  .rv .rv__acts .btn { flex: 1 1 100%; }
  .rv-frame--big { height: min(70vh, 36rem); }
}

@media (prefers-reduced-motion: reduce) {
  .rv-ov, .rv-ov__scrim, .rv { transition: none; }
  .rv-cover__thumb:hover { box-shadow: none; }
}