/* === ЛЕНТА === */
#wprls-feed.wprls-feed {
  position: relative;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #000;
}

:root{ --vvb: 0px; }
:root{ --padB: calc(env(safe-area-inset-bottom, 0px) + var(--vvb, 0px)); }

/* === КАРТОЧКА === */
.wprls-card{
  position: relative;
  height: 100vh;
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: start;
}

/* === ВИДЕО 9:16 === */
.wprls-card .wprls-video{
  display: block;
  height: 100%;
  width: auto;                   /* сохраняем 9:16 */
  max-width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
}

/* скрыть нативные контролы на iOS */
.wprls-card .wprls-video::-webkit-media-controls { display: none !important; }

/* На всякий: тема иногда делает img,video {max-width:100%} — у нас это ок. */

/* === ПРАВАЯ КОЛОНКА КНОПОК === */
.wprls-actions{
  position: absolute;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  z-index: 5;
}

.wprls-btn{
  width: 48px; height: 48px;
  border: none; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.45);
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease;
}
.wprls-btn:hover { transform: scale(1.06); }
.wprls-btn svg { width: 22px; height: 22px; display:block; fill: #fff;}

/* Лайк + счётчик */
.wprls-like-btn{ position: relative; padding: 0; }
.wprls-like-btn .count{
  position: absolute; top: 50px; width: 100%;
  text-align: center; font-weight: 600; font-size: 12px;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.wprls-like-btn.is-liked svg { filter: drop-shadow(0 0 2px rgba(255,0,0,.6)); }
.wprls-like-btn.is-liked path { fill: #ff3b5c; }

/* === ПОДПИСЬ СНИЗУ === */
.wprls-caption{
  position: absolute; left: 12px; right: 30px; 
  color: #fff; z-index: 5;
  font-size: 14px; line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* лёгкий градиент для читабельности текста */
.wprls-card::after{
  content:"";
  position: absolute; left:0; right:0; bottom:0; height: 30%;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  z-index: 1; pointer-events: none;
}

.wprls-title{ font-weight:700; margin-bottom:6px; font-size:15px; }
.wprls-caption a{
  color:#fff!important; font-weight:700; text-underline-offset:2px;
}

/* === МЕЛКИЕ ЮЗАБИЛИТИ === */
@media (hover:none){
  .wprls-btn:hover{ transform:none; }
}

/* Заголовок + inline "Подписаться" */
.wprls-header{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-bottom:6px;
}

/* заголовок как был */
.wprls-title{
  font-weight:700; font-size:15px; color:#fff!important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* разделитель "·" в цвет заголовка, чуть менее заметный */
.wprls-sep{ color:inherit; opacity:.9; }

/* inline-кнопка "Подписаться" — прозрачная, без бордера по умолчанию */
.wprls-inline-follow{
  font-weight:700; font-size:15px; color:inherit; line-height:1.2;
  text-decoration:none; background:transparent; border:1px solid transparent;
  border-radius:6px; padding:2px 8px; cursor:pointer;
}

/* при наведении/фокусе — тонкая прямоугольная рамка в цвет текста */
.wprls-inline-follow:hover,
.wprls-inline-follow:focus-visible{
  border-color: #fff;
  outline:none;
}

/* === Высота контейнера: учитываем разные vh-единицы === */
#wprls-feed.wprls-feed{
  height: 100vh;   /* базовый фоллбек */
  height: 100svh;  /* small vh — без адресной строки */
  height: 100dvh;  /* dynamic vh — следит за UI баром */
}

/* Учитываем "безопасные зоны" снизу (iOS home bar и т.п.) */
.wprls-actions{ bottom: calc(24% + var(--padB)) ; }
.wprls-caption{ bottom: calc(18px + var(--padB)) ; }

/* Читаемость на очень низких экранах */
@media (max-height: 620px){
  .wprls-caption{ font-size: 13px; }
  .wprls-title{ font-size: 14px; }
  .wprls-btn svg{ width: 24px; height: 24px; }
  .wprls-btn span.count{ font-size: 11px; }
}

/* Десктоп: слегка «сжать» элементы, чтобы не выглядело крупно */
@media (min-width: 1024px){
  .wprls-actions{ bottom: calc(20% + var(--padB)) ; gap: 16px; }
  .wprls-btn svg{ width: 26px; height: 26px; }
  .wprls-caption{ right: 110px; } /* место под колонку кнопок */
}

/* Ландшафт на телефоне: помещаем элементы ближе к центру */
@media (orientation: landscape) and (max-height: 520px){
  .wprls-actions{ bottom: calc(12% + var(--padB))  }
  .wprls-caption{ bottom: calc(10px + var(--padB))  }
}

/* Видео: при экстремально широких экранах не вылазить за крышку */
.wprls-card .wprls-video{
  max-width: min(100%, 56vh); /* легкое ограничение ширины на очень широких мониторах */
}

/* === INLINE (в тексте) — компактный, 9:16, без чёрных полей === */
#wprls-feed.wprls-feed.is-inline {
  height: auto;                    /* не растягиваемся на экран */
  overflow: visible;               /* прокрутка страницы, не контейнера */
  scroll-snap-type: none;
  background: transparent;
  padding: 0;
}

/* карточка в inline: не на всю высоту; центрируем и фиксируем 9:16 */
.wprls-feed.is-inline .wprls-card{
  height: auto;
  margin: 16px 0;
  display: block;
}

/* «рамка» с 9:16, ширина задаётся переменной --wprls-width (по умолчанию 420px) */
.wprls-feed.is-inline .wprls-frame{
  position: relative;
  width: var(--wprls-width, 420px);
  max-width: 100%;
  aspect-ratio: 9 / 16;
  margin: 0 auto;                 /* центрируем в контенте */
  border-radius: 12px;
  background: #000;
  overflow: hidden;               /* убираем любые артефакты по краям */
}

/* видео полностью заполняет рамку */
.wprls-feed.is-inline .wprls-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;              /* без чёрных полей */
}

/* правая колонка и подпись привязываем к рамке, а не к экрану */
.wprls-feed.is-inline .wprls-actions{
  position: absolute;
  right: 8px; 
  gap: 10px; z-index: 3;
}

.wprls-feed.is-inline .wprls-btn svg{ width: 22px; height: 22px; }
.wprls-feed.is-inline .wprls-btn span.count{ font-size: 11px; }

.wprls-feed.is-inline .wprls-caption{
  position: absolute; left: 10px; right: 30px; 
  font-size: 13px; line-height: 1.35;
}

/* градиент в inline поменьше */
.wprls-feed.is-inline .wprls-card::after{ display: none; }
.wprls-feed.is-inline .wprls-frame::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height: 26%;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events: none; z-index: 2;
}


/* рамка-«якорь» поверх видео в полноэкранной ленте */
.wprls-feed:not(.is-inline) .wprls-card{
  display: flex; align-items: center; justify-content: center;
}

.wprls-feed:not(.is-inline) .wprls-frame{
  position: relative;
  height: 100%;                /* высота = высоте карточки (экрана) */
  aspect-ratio: 9 / 16;        /* держим 9:16 */
  max-height: 100%;
  /* ширина ограничится естественно из-за aspect-ratio */
  overflow: hidden;            /* чтобы края не «торчали» */
  background: #000;
}

.wprls-feed:not(.is-inline) .wprls-frame .wprls-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;           /* как у тебя было */
}

/* привязываем UI к рамке, а не к экрану */
.wprls-feed:not(.is-inline) .wprls-frame .wprls-actions{ position: absolute; right: 12px;  }
.wprls-feed:not(.is-inline) .wprls-frame .wprls-caption{ position: absolute; left: 12px; right: 30px; }

/* переносим «затемняющий» градиент на рамку (а не на весь экран) */
.wprls-feed:not(.is-inline) .wprls-card::after{ display: none; }
.wprls-feed:not(.is-inline) .wprls-frame::after{
  content:"";
  position: absolute; left:0; right:0; bottom:0; height:30%;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events: none; z-index: 1;
}

.wprls-feed:not(.is-inline) .wprls-frame .wprls-close{
  position:absolute; top:12px; right:12px; z-index:5;
}