/* Reels fullscreen — perfil + barra lateral colados na caixa de comentario */
.rf-feed-reels-viewer.on {
  --rf-reels-ui-gap: 22px;
  --rf-reels-slide-ui-inset: 22px;
  --rf-reels-ui-left-inset: 20px;
  --rf-reels-chrome-bottom: 0px;
  --rf-reels-actions-lift: 0px;
}

/*
 * Slide-ui: o slide ja termina acima da barra de comentario (compose-zone).
 * Nao somar chrome de novo — so um respiro minimo acima da borda do slide.
 */
.rf-feed-reels-slide-ui {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto;
  align-items: end;
  padding:
    0
    max(8px, calc(100% - var(--rf-content-left, 12px) - var(--rf-content-width, 100%) + 8px))
    var(--rf-reels-slide-ui-inset, 6px)
    var(--rf-reels-ui-left-inset, 20px);
  box-sizing: border-box;
}

.rf-feed-reels-slide-ui .rf-feed-reels-lower {
  position: relative !important;
  grid-column: 1;
  grid-row: 2 / 4;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: auto;
  z-index: 5;
}

.rf-feed-reels-slide-ui .rf-feed-reels-actions {
  position: relative !important;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  width: auto !important;
  transform: none !important;
  pointer-events: auto;
  z-index: 6;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
}

/* Curtir fica embaixo da pilha, alinhado ao nome do perfil (so slide-ui do feed) */
.rf-feed-reels-slide-ui .rf-feed-reels-pill--neon {
  flex-direction: column-reverse;
}

#rfProfileReelsViewer.on > .rf-feed-reels-actions .rf-feed-reels-pill--neon,
#rfProfileReelsViewer.on .rf-feed-reels-slide-ui .rf-feed-reels-pill--neon {
  flex-direction: column;
}

/*
 * Feed home usa slide-ui por video — esconde chrome estatico do viewer
 * (evita perfil/descrição duplicados em cima da caixa de comentarios).
 */
#rfFeedReelsViewer > .rf-feed-reels-actions,
#rfFeedReelsViewer > .rf-feed-reels-lower {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Desktop + comentarios: barra fixa na coluna (rf-desktop-shell.css posiciona) */
body.rf-desktop-ui #rfFeedReelsViewer.rf-reels-comments-open.rf-reels-comments-split > .rf-feed-reels-actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Perfil — viewer-level (sem slide-ui): mede distancia ate a barra de comentario ou nav */
#rfProfileReelsViewer.on:not(.rf-reels-cinema):not(.rf-reels-comments-open) > .rf-feed-reels-lower {
  position: absolute !important;
  left: calc(var(--rf-stage-left, 0px) + var(--rf-reels-ui-left-inset, 20px)) !important;
  right: calc(100vw - var(--rf-stage-left, 0px) - var(--rf-stage-w, 100vw) + 64px) !important;
  bottom: calc(var(--rf-reels-chrome-bottom, 54px) + var(--rf-reels-ui-gap, 6px)) !important;
  top: auto !important;
  z-index: 7 !important;
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

#rfProfileReelsViewer.on:not(.rf-reels-cinema):not(.rf-reels-comments-open) > .rf-feed-reels-actions {
  position: absolute !important;
  left: auto !important;
  right: calc(100vw - var(--rf-stage-left, 0px) - var(--rf-stage-w, 100vw) + 8px) !important;
  bottom: calc(
    var(--rf-reels-chrome-bottom, 54px) + var(--rf-reels-ui-gap, 6px) + var(--rf-reels-actions-lift, 0px)
  ) !important;
  top: auto !important;
  width: auto !important;
  transform: none !important;
  z-index: 8 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  visibility: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

#rfProfileReelsViewer.on:not(.rf-reels-cinema):not(.rf-reels-comments-open) > .rf-feed-reels-actions .rf-feed-reels-pill,
#rfProfileReelsViewer.on:not(.rf-reels-cinema):not(.rf-reels-comments-open) > .rf-feed-reels-actions .rf-feed-reels-act {
  pointer-events: auto !important;
}

body.rf-audience-mode .rf-feed-reels-viewer:not(.rf-reels-comments-open) .rf-feed-reels-slide-ui .rf-feed-reels-actions {
  top: auto !important;
  bottom: auto !important;
}

@media (min-width: 769px) {
  body.rf-desktop-ui .rf-feed-reels-viewer.on:not(.rf-reels-cinema) {
    --rf-reels-ui-gap: 26px;
    --rf-reels-slide-ui-inset: 26px;
    --rf-reels-ui-left-inset: 24px;
  }

  body.rf-desktop-ui .rf-feed-reels-viewer.on:not(.rf-reels-cinema) .rf-feed-reels-slide-ui {
    padding-right: 10px;
    padding-left: var(--rf-reels-ui-left-inset, 24px);
    padding-bottom: var(--rf-reels-slide-ui-inset, 26px);
  }

  body.rf-desktop-ui .rf-feed-reels-viewer.on:not(.rf-reels-cinema) .rf-feed-reels-slide-ui .rf-feed-reels-actions,
  body.rf-desktop-ui .rf-feed-reels-viewer.on:not(.rf-reels-cinema) .rf-feed-reels-slide-ui .rf-feed-reels-lower {
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
}

.rf-feed-reels-note-carousel .rf-feed-reels-note-track{
  display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rf-feed-reels-note-carousel .rf-feed-reels-note-track::-webkit-scrollbar{display:none}
.rf-feed-reels-note-carousel .rf-feed-reels-note-cell{
  flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;
  display:flex;align-items:center;justify-content:center;background:#000;
}
.rf-feed-reels-note-carousel .rf-feed-reels-note-cell img,
.rf-feed-reels-note-carousel .rf-feed-reels-note-cell video{
  width:100%;height:100%;object-fit:contain;background:#000;
}
.rf-feed-reels-note-pill{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:8;
  background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;font-weight:800;
  padding:5px 10px;border-radius:999px;pointer-events:none;
}
.rf-feed-reels-note-carousel{touch-action:pan-x pinch-zoom}
.rf-feed-reels-note-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:9;
  width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45);color:#fff;display:none;place-items:center;cursor:pointer;
  backdrop-filter:blur(8px);
}
.rf-feed-reels-note-nav:disabled{opacity:.35;pointer-events:none}
.rf-feed-reels-note-nav--prev{left:10px}
.rf-feed-reels-note-nav--next{right:10px}
@media(min-width:769px){
  .rf-feed-reels-note-carousel .rf-feed-reels-note-nav{
    display:grid!important;
    z-index:24;
    pointer-events:auto;
  }
}
@media(max-width:768px){
  .rf-feed-reels-note-nav{display:none!important}
}
body.rf-desktop-ui .rf-feed-reels-note-carousel .rf-feed-reels-note-nav{
  display:grid!important;
  z-index:24;
  pointer-events:auto;
}
.rf-feed-reels-note-dots{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:9;
  display:flex;align-items:center;justify-content:center;gap:6px;
  max-width:min(92%,280px);padding:6px 10px;border-radius:999px;
  background:rgba(0,0,0,.42);pointer-events:auto;
}
.rf-feed-reels-note-dot{
  width:7px;height:7px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:transform .15s,background .15s;
}
.rf-feed-reels-note-dot.is-active{
  background:#fff;transform:scale(1.25);
}
@media(min-width:769px){
  .rf-feed-reels-note-dots{display:none!important}
}
body.rf-desktop-ui .rf-feed-reels-note-dots{display:none!important}
.rf-feed-reels-note-link{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;
  padding:7px 12px;border-radius:999px;font-size:.78rem;font-weight:800;
  color:#fff;text-decoration:none;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  position:relative;z-index:8;pointer-events:auto;cursor:pointer;
}
.rf-feed-reels-note-link:active{opacity:.85}