/* SUNDUQ v391 — вертикальная лента Клипов. Блок B.1: только просмотр. */

body.cl391Body,body.cl391Body *{box-sizing:border-box}

/* v396: подвал сайта на этой странице не показываем.
 *
 * components/footer-scripts.php печатает <footer class="sunduqFooter"> со
 * ссылкой «Реклама и партнёрство» БЕЗУСЛОВНО. В v391 был подавлен только
 * рекламный баннер (флагом SUNDUQ_AD_RENDERED_ANY) — про сам подвал тогда
 * не подумали, и на production он всплывал поверх вертикального видео:
 * вся остальная разметка Клипов position:fixed, поэтому единственный блок
 * в обычном потоке оказывается в левом верхнем углу экрана.
 *
 * Так же поступают другие полноэкранные страницы SUNDUQ — мессенджер
 * (messenger-v189.css) и главная соседей. Своего способа не выдумываем. */
body.cl391Body .sunduqFooter{display:none!important}
body.cl391Body .suAd203FooterWrap{display:none!important}
body.cl391Body{
  margin:0;
  background:#000;
  color:#eef7ff;
  /* Страница сама себе экран: общий отступ под нижнюю навигацию тут не нужен,
     лента считает его отдельно и только для своей области. */
  padding-bottom:0!important;
  overflow:hidden;
  overscroll-behavior:none;
}

/* Верхняя строка поверх видео: полупрозрачная, чтобы не отъедать высоту. */
body.cl391Body .cl391Top{
  position:fixed;left:0;right:0;top:0;z-index:30;
  display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0));
  pointer-events:none;
}
.cl391Top a,.cl391Top button{pointer-events:auto}
body.cl391Body .cl391Back{
  width:38px;height:38px;flex:0 0 38px;border:0;border-radius:50%;
  background:rgba(12,26,38,.72);color:#eef7ff;font-size:19px;line-height:1;
  display:grid;place-items:center;text-decoration:none;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
body.cl391Body .cl391Title{font-size:16px;font-weight:900;letter-spacing:.01em}
/* Кнопка звука — справа, всегда на активном клипе. */
body.cl391Body .cl391Sound{
  margin-left:auto;flex:0 0 40px;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(12,26,38,.72);color:#eef7ff;font-size:18px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
body.cl391Body .cl391Sound[aria-pressed="true"]{background:rgba(243,29,85,.82)}
.cl391Title small{display:block;font-size:11px;font-weight:700;color:#9fb6c6}

/* Полоса прокрутки — она же лента.
   height:100dvh, а не 100vh: на iPhone адресная строка съезжает, и 100vh
   оказывается выше реального экрана — нижний край клипа уходил бы под неё. */
body.cl391Body .cl391Feed{
  position:fixed;left:0;right:0;top:0;
  height:100vh;
  height:100dvh;
  /* Высоту нижней панели SUNDUQ измеряет скрипт и кладёт в --cl391-nav:
     панель рисуется общим кодом, её высота задана в собранных стилях, и
     угадывать её числом здесь нельзя — подпись клипа уехала бы под панель. */
  padding-bottom:calc(var(--cl391-nav,0px) + env(safe-area-inset-bottom,0px));
  overflow-y:scroll;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  scrollbar-width:none;
}
.cl391Feed::-webkit-scrollbar{display:none}

body.cl391Body .cl391Slide{
  position:relative;
  height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;      /* один свайп — один клип, а не пролёт через три */
  display:grid;
  place-items:center;
  background:#000;
  overflow:hidden;
}

/* Ролик не растягиваем и не обрезаем: contain сохраняет кадр как снят,
   поля вокруг горизонтального видео остаются чёрными. */
body.cl391Body .cl391Video{
  width:100%;height:100%;
  object-fit:contain;
  background:#000;
  display:block;
}
body.cl391Body .cl391Poster{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  background:#000;
  transition:opacity .25s ease;
}
.cl391Slide.cl391Playing .cl391Poster{opacity:0;pointer-events:none}

/* Индикатор только на активном ролике: крутящееся колесо на всех сразу
   создаёт ощущение, что висит вся страница. */
.cl391Spin{
  position:absolute;width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(255,255,255,.22);border-top-color:#fff;
  animation:cl391spin .8s linear infinite;opacity:0;transition:opacity .2s;
  pointer-events:none;
}
.cl391Slide.cl391Loading .cl391Spin{opacity:1}
@keyframes cl391spin{to{transform:rotate(360deg)}}

/* Кнопка появляется, если браузер отказался запускать видео сам. */
.cl391Tap{
  position:absolute;width:74px;height:74px;border-radius:50%;border:0;
  background:rgba(0,0,0,.5);color:#fff;font-size:30px;cursor:pointer;
  display:none;place-items:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.cl391Slide.cl391NeedsTap .cl391Tap{display:grid}

/* Подпись внизу поверх видео. */
body.cl391Body .cl391Info{
  position:absolute;left:0;right:0;bottom:0;
  padding:44px 16px calc(16px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.35) 55%,rgba(0,0,0,0));
  pointer-events:none;
}
.cl391Author{display:flex;align-items:center;gap:9px;margin-bottom:7px;pointer-events:auto}
.cl391Avatar{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;overflow:hidden;
  background:#14344a;display:grid;place-items:center;font-weight:900;font-size:14px;
  border:2px solid rgba(255,255,255,.28);text-decoration:none;color:#dbe9f1;
}
.cl391Avatar img{width:100%;height:100%;object-fit:cover}
.cl391Name{color:#fff;font-weight:800;font-size:14px;text-decoration:none}
.cl391City{color:#c3d6e4;font-size:12px}
.cl391Dot{color:#89a2b4;font-size:12px}
.cl391AiBadge{
  padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800;
  background:rgba(127,194,234,.22);color:#bfe0f6;
}
body.cl391Body .cl391Caption{
  color:#f2f7fb;font-size:14px;line-height:1.42;max-width:640px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.cl391Caption.cl391Full{-webkit-line-clamp:unset;display:block}
.cl391More{
  pointer-events:auto;margin-top:4px;background:none;border:0;padding:0;
  color:#9fc7e4;font-size:13px;font-weight:800;cursor:pointer;
}

/* Служебные экраны: пусто, конец ленты, ошибка. */
body.cl391Body .cl391Note{
  height:100%;display:grid;place-content:center;justify-items:center;gap:10px;
  padding:24px;text-align:center;scroll-snap-align:start;
}
.cl391Note h2{margin:0;font-size:18px}
.cl391Note p{margin:0;color:#9fb6c6;font-size:14px;max-width:320px}
.cl391Note a{
  margin-top:6px;padding:12px 18px;border-radius:14px;background:#f31d55;
  color:#fff;text-decoration:none;font-weight:800;
}

/* Desktop: телефонные пропорции по центру, остальное поле тёмное.
   Растягивать вертикальный ролик на весь монитор незачем — он от этого
   не становится ни больше, ни лучше. */
@media (min-width:781px){
  body.cl391Body .cl391Feed{
    width:min(430px, calc((100dvh - 40px) * 9 / 16));
    left:50%;transform:translateX(-50%);
    top:20px;height:calc(100dvh - 40px);
    padding-bottom:0;
    border-radius:22px;
    border:1px solid #17384d;
    box-shadow:0 30px 80px rgba(0,0,0,.55);
  }
  body.cl391Body .cl391Slide:first-child{border-radius:22px 22px 0 0}
  body.cl391Body{background:radial-gradient(circle at 50% 0,#0d2233,#05101a 60%)}
  body.cl391Body .cl391Top{
    left:50%;transform:translateX(-50%);
    width:min(430px, calc((100dvh - 40px) * 9 / 16));
    top:20px;border-radius:22px 22px 0 0;
    padding-top:12px;
  }
}

/* ==================================================================
   v392 — действия: лайк, комментарии, поделиться
   ================================================================== */

/* Столбик справа поверх клипа. Выше подписи, ниже верхней строки. */
body.cl391Body .cl392Actions{
  position:absolute;right:10px;bottom:96px;z-index:12;
  display:flex;flex-direction:column;gap:14px;align-items:center;
}
body.cl391Body .cl392Act{
  border:0;background:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:#fff;font-size:11px;font-weight:800;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  min-width:52px;min-height:52px;justify-content:center;
}
/* v396.4: снимаем фон, который кнопке рисует общий стиль сайта.
 *
 * Тёмно-синяя плашка вокруг ❤️, 💬, ↗, 👁 и «…» — это НЕ подложка .cl392Glyph,
 * а фон самой <button>. В site-base-v333.css есть правило
 *
 *   button:not(.suMenuBtn):not(.suIconBtn):not(.suSearchClose):not(…)
 *
 * с background rgb(19,38,56) и border-radius:14px. Семь :not() дают ему вес
 * 0-7-1, а объявленному выше `body.cl391Body .cl392Act{background:none}` —
 * всего 0-2-1, поэтому побеждало общее правило. Замерено в браузере: кнопка
 * 52×64 с непрозрачным фоном и радиусом 14px, а круг .cl392Glyph 46×46
 * лежал поверх неё и в глаза не бросался.
 *
 * Из-за этого снижение прозрачности у .cl392Glyph само по себе ничего бы не
 * дало: полупрозрачный круг просто лежал бы на плотной плашке.
 *
 * Тем же правилом приходит и рамка: border:1px solid var(--su-border), то есть
 * rgba(255,255,255,.08). На видео она читалась как слабый прямоугольный контур
 * вокруг каждого круга — заметно, когда фон плашки убрали.
 *
 * Наращивать цепочку селекторов ради перевеса — соревнование, которое
 * следующая правка общего файла выиграет снова. Поэтому !important и ровно на
 * тех трёх свойствах, которые общее правило навязывает. Тот же приём уже
 * применён к круглым кнопкам шапки в clips-upload-v395.css. */
body.cl391Body .cl392Actions .cl392Act{
  background:none!important;
  border:0!important;
  border-radius:0!important;
}
/* v396.4: подложка кнопки — почти прозрачное стекло, а не синяя плашка.
 *
 * Было rgba(8,20,30,.5) с blur(8px). На тёмном кадре это ещё читалось как
 * лёгкое затемнение, а на светлом превращалось в отдельную синюю кнопку
 * поверх видео — заметнее самого клипа.
 *
 * Осталось .15 и blur(4px): подложка нужна не сама по себе, а чтобы белая
 * иконка не терялась на светлом кадре. Эту работу и так делает text-shadow,
 * унаследованный от .cl392Act, поэтому фону достаточно едва обозначить круг.
 *
 * Размер, положение, шрифт и переходы не тронуты — меняются только два
 * значения. Красный фон активного лайка живёт своим правилом ниже и к этому
 * изменению отношения не имеет. */
body.cl391Body .cl392Glyph{
  width:46px;height:46px;border-radius:50%;
  background:rgba(8,20,30,.15);
  display:grid;place-items:center;font-size:22px;line-height:1;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:transform .16s ease, background .16s ease;
}
body.cl391Body .cl392Act:active .cl392Glyph{transform:scale(.9)}
body.cl391Body .cl392Like.cl392Liked .cl392Glyph{background:rgba(243,29,85,.85)}
body.cl391Body .cl392Like.cl392Liked{color:#ffd7e1}

/* Подпись клипа не должна залезать под столбик действий. */
body.cl391Body .cl391Info{padding-right:74px}

/* ---------- панель комментариев ---------- */

body.cl392NoScroll{overflow:hidden}
body.cl391Body .cl392Sheet{
  position:fixed;inset:0;z-index:9900;
  background:rgba(0,0,0,.55);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
body.cl391Body .cl392Sheet.cl392SheetOpen{opacity:1;pointer-events:auto}
body.cl391Body .cl392SheetBox{
  width:100%;max-width:560px;max-height:72dvh;
  display:flex;flex-direction:column;
  background:#0c1f2e;border:1px solid #1d4159;border-bottom:0;
  border-radius:20px 20px 0 0;
  transform:translateY(100%);transition:transform .24s ease;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
body.cl391Body .cl392Sheet.cl392SheetOpen .cl392SheetBox{transform:translateY(0)}

body.cl391Body .cl392SheetHead{
  position:relative;flex:0 0 auto;
  padding:14px 16px 10px;text-align:center;
  border-bottom:1px solid #17384d;
  touch-action:none;            /* тянем панель, а не прокручиваем страницу */
  cursor:grab;
}
body.cl391Body .cl392Grip{
  display:block;width:38px;height:4px;border-radius:999px;
  background:#2c5875;margin:0 auto 9px;
}
body.cl391Body .cl392SheetHead b{font-size:14px;color:#eef7ff}
body.cl391Body .cl392Close{
  position:absolute;right:10px;top:10px;width:34px;height:34px;
  border:0;border-radius:50%;background:#12293c;color:#cfe2ef;
  font-size:20px;line-height:1;cursor:pointer;
}
body.cl391Body .cl392SheetBody{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 14px}
body.cl391Body .cl392Empty{padding:26px 10px;text-align:center;color:#8fa8ba;font-size:14px}

body.cl391Body .cl392Comment{display:flex;gap:10px;padding:9px 0}
body.cl391Body .cl392CommentAvatar{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;overflow:hidden;
  background:#14344a;display:grid;place-items:center;color:#dbe9f1;
  font-weight:900;font-size:13px;text-decoration:none;
}
body.cl391Body .cl392CommentAvatar img{width:100%;height:100%;object-fit:cover}
body.cl391Body .cl392CommentBody{min-width:0;flex:1 1 auto}
body.cl391Body .cl392CommentTop{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:2px}
body.cl391Body .cl392CommentTop b{color:#e5eef4;font-size:13px}
body.cl391Body .cl392CommentTop time{color:#7f97a7;font-size:11px}
body.cl391Body .cl392CommentBody p{margin:0;color:#dbe9f3;font-size:14px;line-height:1.45;overflow-wrap:anywhere}

body.cl391Body .cl392Form{
  flex:0 0 auto;display:flex;gap:8px;align-items:center;
  padding:10px 14px;border-top:1px solid #17384d;background:#0c1f2e;
}
body.cl391Body .cl392Form input{
  flex:1 1 auto;min-width:0;height:44px;padding:0 14px;
  border-radius:999px;border:1px solid #27516c;background:#08192a;
  color:#eef7ff;font-size:15px;
}
body.cl391Body .cl392Form button{
  flex:0 0 44px;width:44px;height:44px;border:0;border-radius:50%;
  background:#f31d55;color:#fff;font-size:19px;cursor:pointer;
}
body.cl391Body .cl392Form button:disabled{opacity:.5}
body.cl391Body .cl392FormGuest{justify-content:center}
body.cl391Body .cl392FormGuest a{color:#7fc2ea;font-weight:800;text-decoration:none;padding:12px}

/* ---------- короткое сообщение ---------- */
body.cl391Body .cl392Toast{
  position:fixed;left:50%;bottom:calc(var(--cl391-nav,0px) + 24px);
  transform:translateX(-50%) translateY(14px);
  z-index:9950;max-width:88vw;
  padding:11px 16px;border-radius:14px;
  background:rgba(6,20,30,.94);border:1px solid #1d4159;
  color:#eef7ff;font-size:14px;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
}
body.cl391Body .cl392Toast.cl392ToastShow{opacity:1;transform:translateX(-50%) translateY(0)}

@media (min-width:781px){
  body.cl391Body .cl392Actions{right:14px;bottom:104px}
  body.cl391Body .cl392SheetBox{max-height:70dvh;border-radius:20px;margin-bottom:24px}
  body.cl391Body .cl392Sheet{align-items:center}
}

/* ==================================================================
   v393 — просмотры, меню клипа, отмена скрытия
   ================================================================== */

/* Просмотры — показатель, а не кнопка: без нажатия и без курсора. */
body.cl391Body .cl393Views{cursor:default;opacity:.92}
body.cl391Body .cl393More .cl392Glyph{font-size:20px;letter-spacing:1px}

/* Меню клипа: снизу на телефоне, по центру на широком экране. */
body.cl391Body .cl393Menu{
  position:fixed;inset:0;z-index:9910;
  background:rgba(0,0,0,.5);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
body.cl391Body .cl393Menu.cl393MenuOpen{opacity:1;pointer-events:auto}
body.cl391Body .cl393MenuBox{
  width:100%;max-width:460px;margin:0 10px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:8px;
  transform:translateY(16px);transition:transform .2s ease;
}
body.cl391Body .cl393Menu.cl393MenuOpen .cl393MenuBox{transform:translateY(0)}
body.cl391Body .cl393MenuBox button{
  width:100%;min-height:52px;border:1px solid #1d4159;border-radius:16px;
  background:#0c1f2e;color:#eef7ff;font-size:16px;font-weight:700;cursor:pointer;
}
body.cl391Body .cl393MenuBox .cl393MenuCancel{background:#12293c;color:#9fb6c6;font-weight:800}

/* Полоса отмены. Живёт над нижней навигацией, чтобы её было видно. */
body.cl391Body .cl393Undo{
  position:fixed;left:50%;bottom:calc(var(--cl391-nav,0px) + 24px);
  transform:translateX(-50%) translateY(14px);
  z-index:9940;display:flex;align-items:center;gap:14px;
  padding:11px 12px 11px 18px;border-radius:14px;
  background:rgba(6,20,30,.96);border:1px solid #1d4159;color:#eef7ff;font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
}
body.cl391Body .cl393Undo.cl393UndoShow{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
body.cl391Body .cl393Undo button{
  border:0;background:none;color:#7fc2ea;font-size:14px;font-weight:800;cursor:pointer;
  padding:4px 6px;min-height:32px;
}

@media (min-width:781px){
  body.cl391Body .cl393Menu{align-items:center}
  body.cl391Body .cl393MenuBox{margin-bottom:0}
}