/* Facelov YouTube rich preview v1.0.3 */

/* The composer must never hide the publish button below the viewport. */
html body .fl-post-modal{
  max-height:calc(100dvh - 28px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin;
}

html body .fl-post-modal__head{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  background:#fff!important;
}

/* Compact text area once a link card is present, like Facebook. */
html body .fl-post-modal.fl-post-modal--youtube .fl-post-modal__textarea{
  min-height:92px!important;
  max-height:132px!important;
  resize:none!important;
  padding-top:10px!important;
  padding-bottom:10px!important;
}

/* Rich link card */
html body .fl-youtube-compose-preview{
  margin:0 15px 10px!important;
}

html body .fl-youtube-compose-card{
  overflow:hidden!important;
  border:1px solid #dfe1e5!important;
  border-radius:10px!important;
  background:#e4e6eb!important;
  box-shadow:none!important;
}

html body .fl-youtube-compose-card__media{
  position:relative!important;
  width:100%!important;
  height:220px!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  background:#111!important;
}

html body .fl-youtube-compose-card__media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

html body .fl-youtube-compose-card__play{
  width:54px!important;
  height:40px!important;
  border-radius:12px!important;
  font-size:19px!important;
}

html body .fl-youtube-compose-card__copy{
  display:block!important;
  padding:8px 12px 10px!important;
  background:#e4e6eb!important;
  min-height:57px!important;
}

html body .fl-youtube-compose-card__domain{
  display:block!important;
  margin:0 0 2px!important;
  color:#65676b!important;
  font-size:10px!important;
  font-weight:500!important;
  line-height:1.25!important;
  text-transform:uppercase!important;
}

html body .fl-youtube-compose-card__title{
  display:block!important;
  margin:0!important;
  color:#1c1e21!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.28!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html body .fl-youtube-compose-card__author{
  display:block!important;
  margin-top:2px!important;
  color:#65676b!important;
  font-size:11px!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html body .fl-youtube-compose-card__author[hidden]{
  display:none!important;
}

/* Smaller and calmer "add to post" row when a YouTube card exists. */
html body .fl-post-modal.fl-post-modal--youtube .fl-post-modal__add{
  min-height:52px!important;
  margin-top:0!important;
  margin-bottom:10px!important;
}

/* Always reachable/visible. */
html body .fl-post-modal__publish{
  position:sticky!important;
  bottom:10px!important;
  z-index:35!important;
  min-height:44px!important;
  margin-bottom:10px!important;
  box-shadow:
    0 0 0 8px rgba(255,255,255,.96),
    0 8px 20px rgba(86,48,170,.16)!important;
}

/* Launch UI: one Facelov accent instead of the old pink gradient. */
html body .fl-post-modal__publish{
  background:#7c3aed!important;
}
html body .fl-post-modal__publish:hover{
  background:#6d28d9!important;
}

@media(max-width:640px){
  html body .fl-post-modal{
    width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:15px!important;
  }

  html body .fl-post-modal.fl-post-modal--youtube .fl-post-modal__textarea{
    min-height:82px!important;
    max-height:112px!important;
  }

  html body .fl-youtube-compose-preview{
    margin-left:10px!important;
    margin-right:10px!important;
  }

  html body .fl-youtube-compose-card__media{
    height:190px!important;
  }

  html body .fl-youtube-compose-card__title{
    font-size:13px!important;
  }

  html body .fl-post-modal__publish{
    bottom:8px!important;
  }
}

@media(max-width:420px){
  html body .fl-youtube-compose-card__media{
    height:165px!important;
  }
}