:root{
  --cfvb-size: 92px;
  --cfvb-x: 24px;
  --cfvb-y: 24px;
  --cfvb-z: 9999;
  --cfvb-border-w: 3px;
  --cfvb-border-color: #6D5EF3;
  --cfvb-hover-scale: 1.06;
  --cfvb-entrance-ms: 260ms;
}

#cfvb-bubble, #cfvb-panel {
  position: fixed;
  z-index: var(--cfvb-z);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

#cfvb-bubble {
  width: var(--cfvb-size);
  height: var(--cfvb-size);
  border-radius: 999px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  display: none;
  transform-origin: center;
}

#cfvb-bubble.cfvb-shadow{
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

#cfvb-bubble video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* hover grow */
@media (hover:hover){
  #cfvb-bubble:hover{
    transform: scale(var(--cfvb-hover-scale));
  }
}

/* Position bubble */
#cfvb-bubble.pos-br{ right: var(--cfvb-x); bottom: var(--cfvb-y); }
#cfvb-bubble.pos-bl{ left:  var(--cfvb-x); bottom: var(--cfvb-y); }
#cfvb-bubble.pos-tr{ right: var(--cfvb-x); top:    var(--cfvb-y); }
#cfvb-bubble.pos-tl{ left:  var(--cfvb-x); top:    var(--cfvb-y); }

/* Gradient border using mask */
#cfvb-bubble.cfvb-border-gradient::before,
#cfvb-panel.cfvb-border-gradient::before{
  content:"";
  position:absolute;
  inset:0;
  padding: var(--cfvb-border-w);
  border-radius: inherit;
  background: conic-gradient(from 180deg, var(--cfvb-gradient));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

#cfvb-bubble.cfvb-border-solid{
  border: var(--cfvb-border-w) solid var(--cfvb-border-color);
}

#cfvb-bubble.cfvb-border-none{
  border: none;
}

/* Entrance */
#cfvb-bubble.cfvb-entrance{
  opacity: 0;
  transform: scale(.92);
  transition: opacity var(--cfvb-entrance-ms) ease, transform var(--cfvb-entrance-ms) ease;
}
#cfvb-bubble.cfvb-entrance.cfvb-show{
  opacity: 1;
  transform: scale(1);
}

/* Expanded panel (corner player) */
#cfvb-panel{
  display:none;
  width: min(var(--cfvb-panel-w), calc(100vw - 24px));
  height: min(var(--cfvb-panel-h), calc(100vh - 24px));
  border-radius: 18px;
  overflow: hidden;
  background: rgba(10,10,12,.96);
  border: 1px solid rgba(255,255,255,.10);
}

#cfvb-panel.cfvb-shadow{
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

#cfvb-panel.pos-br{ right: var(--cfvb-x); bottom: var(--cfvb-y); }
#cfvb-panel.pos-bl{ left:  var(--cfvb-x); bottom: var(--cfvb-y); }
#cfvb-panel.pos-tr{ right: var(--cfvb-x); top:    var(--cfvb-y); }
#cfvb-panel.pos-tl{ left:  var(--cfvb-x); top:    var(--cfvb-y); }

#cfvb-panel video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  background:#000;
}

#cfvb-panel .cfvb-topbar{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:8px;
  z-index: 2;
}

#cfvb-panel .cfvb-btn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  line-height:1;
}

#cfvb-panel .cfvb-cta{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.30);
  color:#fff;
  text-decoration:none;
  font-size: 14px;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  #cfvb-bubble, #cfvb-panel { transition: none !important; }
  #cfvb-bubble:hover { transform:none !important; }
}