/* assets/flip.css */

.flip-root { max-width: 1100px; margin: 0 auto; padding: 12px 14px 30px; }
.flip-root { height: 100vh; height: 100dvh; }
.flip-head { display: flex; flex-direction: column; gap: 10px; }
.flip-title { margin: 0; font-size: 22px; }

.flip-uploader { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flip-file { max-width: 260px; }
.flip-captionInput { width: 240px; padding: 8px 10px; border: 1px solid rgba(0,0,0,.15); border-radius: 10px; }
.flip-send { padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(0,0,0,.15); background: #fff; cursor: pointer; }
.flip-status { opacity: .75; font-size: 13px; min-height: 18px; }

.flip-feed { height: 100vh; height: 100dvh; }
.flip-item { height: 100vh; height: 100dvh; }
.flip-stage { height: 100vh; height: 100dvh; }



.flip-feed{
  margin-top: 14px;
  height: calc(var(--flip-vh, 1vh) * 100 - 220px);
  min-height: 420px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #000;
}

.flip-item{
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  grid-template-columns: 1fr;
}

.flip-stage{
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.flip-video{
  width: 100%;
  /*height: 100%;*/    
  margin-bottom: 90px;
  object-fit: cover;
object-position: center;
  background: #000;
max-width: 560px;}

.flip-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.flip-actions{
  position: absolute;
  right: 12px;
  bottom: 200px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
}

.flip-btn{
  width: 46px;
  height: 46px;
  border-radius: 999px;

  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  user-select: none;
}

.flip-btn span{ font-size: 12px; opacity: .9; margin-top: 2px; display: block; }
.flip-btn--liked{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.flip-likeIco--on{ display:none; }

.flip-likeBtn[data-flip-like="1"] .flip-likeIco--on{
  display:block !important;
  color:#ff4d6d !important;
}

.flip-likeBtn[data-flip-like="1"] .flip-likeIco--off{
  display:none !important;
}

.flip-likeBtn[data-flip-like="1"] .flip-likeCount{
  color:#ff4d6d !important;
}

.flip-progress{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255,255,255,.12);
}
.flip-progress > i{
  display: block;
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,.85);
}

.flip-playHint{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.flip-playHint b{
  font-size: 56px;
  color: rgba(255,255,255,.9);
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.flip-item[data-paused="1"] .flip-playHint{ opacity: .9; }

/* comments modal — dark like Social */
.flip-modal{ position: fixed; inset: 0; display: none; z-index: 9999; }
.flip-modal[aria-hidden="false"]{ display: block; }
.flip-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.65); }

.flip-modal__sheet{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(560px, 100vw);
  max-height: 68vh;
  background: #0b0b0b;
  color: #fff;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.10);
}

.flip-modal__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.flip-modal__title{ font-weight: 700; }
.flip-modal__close{
  border:0;
  background: transparent;
  color:#fff;
  font-size: 18px;
  cursor:pointer;
  opacity:.9;
}

.flip-modal__list{
  padding: 10px 14px;
  overflow:auto;
  flex:1;
}

.flip-cmt{
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.flip-cmt__meta{ font-size: 12px; opacity: .7; margin-bottom: 3px; }
.flip-cmt__body{ font-size: 14px; line-height: 1.35; }

.flip-cmtEmpty{
  padding: 26px 10px;
  text-align: center;
}
.flip-cmtEmpty__title{
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 6px;
}
.flip-cmtEmpty__sub{
  opacity: .75;
  font-size: 13px;
}

.flip-modal__form{
  display:flex;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: #0b0b0b;
}

.flip-modal__input{
  flex:1;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: #111;
  color: #fff;
  outline: none;
}

.flip-modal__send{
  padding: 12px 14px;
  border-radius: 12px;
  border: 0;
  background: #7b61ff; /* можно потом привязать к твоей переменной */
  color:#fff;
  cursor:pointer;
  font-weight: 700;
}
.flip-modal__send:disabled{ opacity:.6; cursor: default; }

/* share modal (send to friends) */
.flip-share__search{
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: #0b0b0b;
}
.flip-share__input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: #111;
  color: #fff;
  outline: none;
}
.flip-share__list{
  overflow: auto;
  flex: 1;
}
.flip-shareRow{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.flip-shareRow:hover{ background: rgba(255,255,255,.06); }
.flip-shareRow[aria-pressed="true"]{ background: rgba(123,97,255,.16); }

.flip-shareRow__ava{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  flex: 0 0 auto;
}
.flip-shareRow__ava img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.flip-shareRow__meta{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.flip-shareRow__name{
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flip-shareRow__id{
  font-size: 12px;
  opacity: .65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flip-shareRow__check{
  width: 28px;
  text-align: right;
  font-weight: 900;
}

.flip-share__hint{
  padding: 8px 14px 0;
  min-height: 18px;
  font-size: 12px;
  opacity: .75;
}
.flip-share__bottom{
  display: flex;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: #0b0b0b;
}
.flip-share__btn{
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: #111;
  color:#fff;
  cursor:pointer;
  font-weight: 700;
}
.flip-share__btn--primary{
  background: #7b61ff;
  border: 0;
}
.flip-share__btn:disabled{ opacity:.6; cursor: default; }

.flip-shareEmpty{
  padding: 18px 14px;
  opacity: .75;
}

.flip-shareBtn svg{
  width: 22px;
  height: 22px;
}





/* --- Fullscreen Flip (no page scroll; only video scrolls) --- */
html, body { height: 100%; overflow: hidden; }
body { margin: 0; overscroll-behavior: none; }

.flip-root{
  height: calc(var(--flip-vh, 1vh) * 100);
  max-width:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}

.flip-head{ flex:0 0 auto; padding:12px 14px; }

.flip-feed{
  flex:1 1 auto;
  height:auto;
  margin-top:0;
  border-radius:0;
  border:0;
}



@media (max-width: 768px) {
    body {
        margin: 0px 0 0 !important;
    }
}


/* === PATCH: flip action buttons (match Social icons + data-like switching) === */
.flip-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.flip-btn .flip-likeIco,
.flip-btn .flip-commentIco{
  width: 24px;
  height: 24px;
  display: block;
  line-height: 0;
  margin-top: 0 !important; /* override old .flip-btn span rule */
}
.flip-btn .flip-likeIco svg,
.flip-btn .flip-commentIco svg{
  width: 24px;
  height: 24px;
  display: block;
}

.flip-likeIco--on{ display:none; }
.flip-likeBtn[data-flip-like="1"] .flip-likeIco--on{ display:block; }
.flip-likeBtn[data-flip-like="1"] .flip-likeIco--off{ display:none; }
.flip-likeCount,
.flip-commentNum{
  font-size: 12px;
  opacity: .92;
  margin-top: 0 !important;
}

.flip-commentNum.is-zero{ opacity: .7; }

/* (optional) make fallback comments modal taller */
.flip-modal__sheet{
  max-height: min(86vh, 920px);
  bottom: 6px;
}

@media (min-width: 990px) and (max-width: 1199px) {
    :root {
        --social-top-shift: 0;
    }
}

@media (max-width: 934px) {
    body {
       margin: 0 0 0 !important;
    }
}

@media (min-width: 750px) and (max-width: 934px) {
    :root {
        --social-top-shift: 0 !important;
    }
}
@media (min-width: 935px) and (max-width: 989px) {
    :root {
        --social-top-shift: 0 !important;
    }
}
@media (min-width: 990px) and (max-width: 1199px) {
    :root {
        --social-top-shift: 0 !important;
    }
}
@media (min-width: 1200px) {
    :root {
        --social-top-shift: 0 !important;
    }
}



/* === Video processing overlay (hide temporary "Video not found") === */
.flip-processing{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  background:rgba(0,0,0,.55);
  color:#fff;
  z-index: 10;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}
.flip-processing[data-processing="1"]{ opacity:1; }
.flip-spinner{
  width:28px;
  height:28px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.35);
  border-top-color:rgba(255,255,255,.9);
  animation: flipSpin .9s linear infinite;
  margin-bottom:10px;
}
@keyframes flipSpin{ to{ transform:rotate(360deg); } }
.flip-processing__txt{ font-weight:700; font-size:15px; margin-bottom:6px; }
.flip-processing__sub{ font-size:13px; opacity:.9; max-width:280px; }



/* === PATCH: processing overlay + better modal height === */

.flip-processing {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: rgba(0,0,0,.55);
  color: #fff;
  text-align: center;
  padding: 16px;
  z-index: 10;
}
.flip-processing.is-on { display: flex; }

.flip-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: flipspin 1s linear infinite;
}
@keyframes flipspin { to { transform: rotate(360deg); } }

.flip-processing__txt { font-size: 14px; line-height: 1.35; opacity: .95; }
.flip-processing__sub { font-size: 12px; line-height: 1.35; opacity: .75; }

/* modal a bit taller */
.flip-modal__sheet { max-height: 90vh; }


.flip-head{ display:none !important; }


.flip-btn[data-mute] svg{
  width: 22px;
  height: 22px;
  display: block;
}/* replies */
.c-social__cmtAva--sm{
  width:26px;
  height:26px;
  flex:0 0 26px;
  font-size:12px;
}
.c-social__cmtReplyRow{
  display:flex;
  gap:8px;
  align-items:flex-start;
  padding:6px 0;
}
.c-social__cmtReplyBody{ flex:1; min-width:0; }




/* ==== COMMENTS: avatar visible ==== */
.c-social__cmtRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
}

.c-social__cmtAva{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:14px;
  line-height:1;
  background-color:rgba(255,255,255,.12);
  color:#fff;
}

.c-social__cmtBody{ flex:1; min-width:0; }








/* --- Flip comments: force avatars visible (root + replies) --- */
.c-social__cmtRow .c-social__cmtAva,
.c-social__cmtReplies .c-social__cmtAva {
  display: flex !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 999px !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden !important;
}

.c-social__cmtAva--sm {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 12px !important;
}

/* Если у тебя ответы рисуются строками replyRow/replyBody */
.c-social__cmtReplyRow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 8px;
}
.c-social__cmtReplyBody { flex: 1; min-width: 0; }
.c-social__cmtReplyTop { margin-bottom: 2px; }


/* top progress uses existing .flip-progress */
.flip-progress.flip-progress--top{
  top: 5px;
  bottom: auto;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
}
.flip-progress.flip-progress--top > i{
  border-radius: 999px;
}





/* === FIX: stable Flip layout + iPhone smoothness === */
.flip-feed{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  background: #000;
}

.flip-item,
.flip-stage{
  overflow: hidden;
  background: #000;
}

.flip-stage{
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.flip-video{
  display: block;
  width: 100% !important;
  
   /*max-width: none !important;*/
  max-height: none !important;
  margin: 0 !important; /* УБИРАЕМ старый margin-bottom:90px */
  object-fit: cover;
  object-position: center center;
  background: #000;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.flip-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.flip-author{
  top: calc(12px + env(safe-area-inset-top, 0px));
  z-index: 20;
}

/* Кнопки всегда в одном месте, независимо от пропорций видео */
.flip-actions{
  position: absolute;
  right: calc(10px + env(safe-area-inset-right, 0px));
  bottom: calc(200px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  z-index: 25;
  pointer-events: auto;
}

/* Подпись не залезает на кнопки */
.flip-captionBar{
  left: 12px;
  right: 72px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
}

/* Play-hint делаем мягче (сейчас выглядит грубовато) */
.flip-playHint b{
  font-size: 44px;
  color: rgba(255,255,255,.22);
  text-shadow: 0 8px 24px rgba(0,0,0,.35);
}



/* === FLIP pull-to-refresh === */

/* Важно: root должен быть якорем для индикатора */
#flip-root {
  position: relative;
}

/* Важно: сам feed должен быть скролл-контейнером */
#flip-feed {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  will-change: transform;
}

/* "Резина": тянем без transition, отпускаем со snap */
#flip-feed.flip-ptr--dragging {
  transition: none !important;
}

#flip-feed.flip-ptr--snap {
  transition: transform 0.22s ease;
}

/* Индикатор pull-to-refresh */
.flip-ptr {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -16px);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.flip-ptr.is-visible {
  opacity: 1;
}

.flip-ptr__bubble {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(18, 18, 18, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
}

.flip-ptr__icon {
  width: 20px;
  height: 20px;
  color: #fff;
  display: inline-flex;
  transition: transform .15s ease, opacity .15s ease;
  opacity: .8;
}

.flip-ptr__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Когда дотянули до порога */
.flip-ptr.is-armed .flip-ptr__bubble {
  transform: scale(1.03);
}

/* Пока реально идет refresh */
.flip-ptr.is-refreshing .flip-ptr__icon {
  animation: flipPtrSpin .75s linear infinite;
  opacity: 1;
}

@keyframes flipPtrSpin {
  to { transform: rotate(360deg); }
}


.flip-likeCount{
  cursor:pointer;
}

/* === Flip: back button + bottom author + expandable caption === */

.flip-backBtn{
  position: fixed;
  left: calc(12px + env(safe-area-inset-left, 0px));
  top: calc(12px + env(safe-area-inset-top, 0px));
  z-index: 80;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.flip-backBtn svg{
  width: 22px;
  height: 22px;
  display: block;
}

.flip-captionBar{
  display: none !important;
}

.flip-meta{
  position: absolute;
  left: 12px;
  right: 72px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 28;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
  pointer-events: auto;
}

.flip-meta::before{
  content: "";
  position: absolute;
  inset: -12px -10px -10px -10px;
  border-radius: 22px;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.28), rgba(0,0,0,0));
  z-index: -1;
  pointer-events: none;
}

.flip-meta.is-empty{
  gap: 0;
}

.flip-meta.is-expanded::before{
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.42), rgba(0,0,0,.08));
}

.flip-author--bottom{
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: auto;
}

.flip-author--bottom .flip-author__link{
  min-width: 0;
  max-width: calc(100% - 128px);
}

.flip-author--bottom .flip-author__ava{
  width: 36px;
  height: 36px;
}

.flip-author--bottom .flip-author__name{
  font-size: 14px;
  font-weight: 700;
}

.flip-author--bottom .flip-follow{
  flex: 0 0 auto;
}

.flip-caption{
  display: block;
  min-width: 0;
}

.flip-caption__previewRow{
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}

.flip-caption__preview{
  flex: 1 1 auto;
  min-width: 0;
}

.flip-caption__text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.32;
  opacity: .96;
}

.flip-caption__more{
  display: none;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: .95;
}

.flip-caption__expanded{
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: max-height .24s ease, opacity .18s ease, transform .18s ease, margin-top .18s ease, padding .18s ease;
  margin-top: 0;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.54);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.42;
}

.flip-meta.is-expanded .flip-caption__expanded{
  max-height: min(32vh, 220px);
  overflow: auto;
  opacity: 1;
  transform: translateY(0);
  margin-top: 10px;
  padding: 12px 14px;
}

.flip-meta.is-expanded .flip-caption__text{
  -webkit-line-clamp: 3;
}

.flip-meta.is-empty .flip-caption{
  display: none;
}

@media (max-width: 934px){
  .flip-actions{
    right: calc(10px + env(safe-area-inset-right, 0px));
    
  }

  .flip-meta{
    left: 12px;
    right: 72px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .flip-author--bottom .flip-follow{
    padding: 7px 12px;
    font-size: 13px;
  }
}

@media (min-width: 935px){
  .flip-actions{
    right: 16px;
   
  }

  .flip-meta{
    left: 18px;
    right: 84px;
    bottom: 22px;
    max-width: min(620px, calc(100% - 110px));
  }

  .flip-caption__more{
    display: inline-block;
  }
}









/* === ONE unified caption sheet (mobile + desktop) === */

/* видео и оверлеи едут вместе */
.flip-video,
.flip-actions,
.flip-progress.flip-progress--top,
.flip-playHint,
.flip-backBtn{
  transition: transform .28s ease;
}

/* лайки возле видео */
.flip-actions{
  position: absolute;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

/* нижняя общая панель */
.flip-meta{
  position: absolute;
  z-index: 28;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #fff;
  pointer-events: auto;
  padding: 10px 14px 14px;
}

.flip-meta::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  bottom: 0;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.58) 45%,
    rgba(0,0,0,0) 100%
  );
  z-index: -1;
  pointer-events: none;
}

/* автор всегда внизу, а не сверху */
.flip-author--bottom{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.flip-author--bottom .flip-author__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: calc(100% - 140px);
  color: #fff;
  text-decoration: none;
}

.flip-author--bottom .flip-author__ava{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
}

.flip-author--bottom .flip-author__name{
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flip-author--bottom .flip-follow{
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.25);
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

/* caption */
.flip-caption{
  display: block;
  min-width: 0;
}

.flip-caption__previewRow{
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.flip-caption__preview{
  min-width: 0;
  overflow: hidden;
}

.flip-caption__text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  color: #fff !important;
  font-size: 14px;
  line-height: 1.32;
  opacity: 1 !important;
}

.flip-caption__more{
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  opacity: 1 !important;
}

.flip-caption__expanded{
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.42;
  transition: max-height .28s ease, opacity .22s ease, margin .22s ease, transform .28s ease;
  transform: translateY(8px);
}

/* opened sheet */
.flip-meta.is-expanded{
  gap: 0;
  padding-top: 6px;
  padding-bottom: 10px;
  transform: translateY(var(--sheet-dy, 0px));
  transition: transform .22s ease, padding .28s ease, gap .28s ease;
}

.flip-meta.is-dragging{
  transition: none;
}

.flip-meta.is-expanded::before{
  top: 0;
  bottom: 0;
  border-radius: 24px 24px 0 0;
  background: rgba(12,12,12,.96);
}

.flip-meta.is-expanded .flip-caption{
  position: relative;
  padding-top: 6px;
  margin-top: 0;
}
.flip-author--bottom{
  margin-bottom: 0 !important;
}

.flip-caption{
  margin-top: 0 !important;
}

.flip-caption__expanded{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.flip-meta.is-expanded .flip-caption__previewRow{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 14px;
  display: block;
}

.flip-meta.is-expanded .flip-caption__preview,
.flip-meta.is-expanded .flip-caption__more{
  display: none !important;
}

.flip-meta.is-expanded .flip-caption__previewRow::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
}

.flip-meta.is-expanded .flip-caption__expanded{
  max-height: min(26vh, 180px);
  overflow: auto;
  opacity: 1;
  margin-top: 0;
  transform: translateY(0);
}

/* mobile */
@media (max-width: 934px){
  .flip-actions{
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }

  .flip-meta{
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .flip-item.is-sheet-open .flip-video,
  .flip-item.is-sheet-open .flip-actions,
  .flip-item.is-sheet-open .flip-progress.flip-progress--top,
  .flip-item.is-sheet-open .flip-playHint,
  .flip-item.is-sheet-open .flip-backBtn{
    transform: translateY(-72px) scale(.90);
    transform-origin: center center;
  }

  .flip-meta.is-expanded{
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

/* desktop */
@media (min-width: 935px){
  .flip-actions{
    right: calc(50% - 280px + 14px);
    bottom: 132px;
  }

  .flip-backBtn{
    left: calc(50% - 280px + 12px);
    top: 12px;
  }

  .flip-meta{
    left: calc(50% - 280px);
    right: calc(50% - 280px);
    bottom: 0;
    padding: 10px 16px 14px;
  }

  .flip-item.is-sheet-open .flip-video,
  .flip-item.is-sheet-open .flip-actions,
  .flip-item.is-sheet-open .flip-progress.flip-progress--top,
  .flip-item.is-sheet-open .flip-playHint,
  .flip-item.is-sheet-open .flip-backBtn{
    transform: translateY(-56px) scale(.92);
    transform-origin: center center;
  }

  .flip-meta.is-expanded{
    left: calc(50% - 280px);
    right: calc(50% - 280px);
    bottom: 0;
    padding: 10px 18px 16px;
  }

  .flip-meta.is-expanded .flip-caption__expanded{
    max-height: min(24vh, 180px);
  }
}





.flip-video{
  opacity: 1;
  transition: opacity .08s linear, transform .28s ease;
}