/* Floating Video Widget — Reels Style */

#fvw-root {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
}

#fvw-root.pos-bottom-right { bottom: 24px; right: 24px; }
#fvw-root.pos-bottom-left  { bottom: 24px; left: 24px; }
#fvw-root.pos-top-right    { top: 80px;    right: 24px; }
#fvw-root.pos-top-left     { top: 80px;    left: 24px; }

/* ── Widget card — 9:16 reels style ── */
#fvw-card {
  pointer-events: all;
  position: relative;
  width: var(--fvw-width, 200px);
  aspect-ratio: 9 / 16;
  border-radius: var(--fvw-radius, 16px);
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 2px 8px rgba(0,0,0,.2);

  opacity: 0;
  transform: translateY(20px) scale(.94);
  transition:
    opacity .45s cubic-bezier(.4,0,.2,1),
    transform .45s cubic-bezier(.34,1.56,.64,1);
  will-change: transform, opacity;
  background: #000;
}

#fvw-card.fvw-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Video fills the card ── */
#fvw-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Gradient overlay at bottom ── */
#fvw-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.55) 0%,
    transparent 35%,
    transparent 70%,
    rgba(0,0,0,.25) 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* ── Buttons overlay ── */
.fvw-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
}

/* Top-right: close */
.fvw-overlay-top {
  display: flex;
  justify-content: flex-end;
}

/* Bottom row: sound toggle */
.fvw-overlay-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
}

/* Shared pill button */
.fvw-pill {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .15s;
  padding: 0;
  flex-shrink: 0;
}
.fvw-pill:hover  { background: rgba(0,0,0,.65); transform: scale(1.08); }
.fvw-pill:active { transform: scale(.95); }
.fvw-pill svg    { width: 18px; height: 18px; fill: #fff; display: block; }

/* Progress bar — thin line at very bottom */
.fvw-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,.25);
  z-index: 3;
}
.fvw-bar-fill {
  height: 100%;
  background: var(--fvw-accent, #e53935);
  width: 0%;
  transition: width .1s linear;
}

/* ── Mobile ── */
@media (max-width: 500px) {
  #fvw-root.pos-bottom-right,
  #fvw-root.pos-bottom-left {
    bottom: 16px;
    right: 16px;
    left: auto;
  }
  #fvw-card { --fvw-width: 140px; }
}