/* Полный просмотр публикации (ui/post-feed-view.js) — лента карточек
   во весь экран: карусель кадров, лайк/просмотры/комментарии числом,
   подпись, разговор под ней. Литералы цвета — только themes.css. */

.post-view {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--base) var(--ease);
}

.post-view.is-open { opacity: 1; pointer-events: auto; }

.post-view__head {
  display: flex;
  padding: var(--sp-3) var(--sp-4);
}

.post-view__close {
  display: grid;
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
}

.post-view__close .icon { width: var(--fs-md); height: var(--fs-md); }

.post-view__body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: var(--sp-8);
}

.pv-post { border-bottom: var(--sp-1) solid var(--surface-2); }

.pv-post__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
}

.pv-post__when { font-size: var(--fs-xs); color: var(--text-faint); }

.pv-post__menu {
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-dim);
}

.pv-post__menu .icon { width: var(--fs-md); height: var(--fs-md); }

@media (hover: hover) {
  .pv-post__menu:hover { background: var(--surface-2); }
}

/* ── Карусель кадров ── */
.pv-carousel { position: relative; }

.pv-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pv-track::-webkit-scrollbar { display: none; }

.pv-slide {
  flex: 0 0 100%;
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
}

.pv-slide img { width: 100%; height: 100%; object-fit: cover; }

.pv-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sp-2);
  display: flex;
  justify-content: center;
  gap: var(--sp-1);
}

.pv-dot {
  width: 1.54cqw;
  height: 1.54cqw;
  border-radius: 50%;
  background: var(--veil);
}

.pv-dot.is-on { background: var(--on-badge); }

.pv-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: none;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border: none;
  border-radius: 50%;
  background: var(--veil);
  color: var(--on-badge);
}

.pv-arrow--prev { left: var(--sp-2); }
.pv-arrow--next { right: var(--sp-2); }
.pv-arrow--prev .icon { transform: rotate(180deg); }

@media (hover: hover) {
  .pv-carousel:hover .pv-arrow { display: grid; }
}

/* ── Лайк, просмотры, комментарии числом ── */
.pv-stats {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}

.pv-stat {
  display: flex;
  align-items: center;
  gap: .5ch;
  border: none;
  padding: 0;
  background: none;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.pv-stat .icon { width: var(--fs-lg); height: var(--fs-lg); }

button.pv-stat.is-like { cursor: pointer; transition: color var(--fast) var(--ease); }
.pv-stat.is-like.is-on { color: var(--danger); }

.pv-caption {
  padding: 0 var(--sp-4) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: pre-wrap;
}

/* Комментарии — components/post-comments.css: этот файл и без них
   стоял у потолка длины. */