/* ============================================================
   Yetana Bubble v1.2 — Frontend Styles
   Tested up to: WordPress 6.9
   ============================================================ */
.yetana-bubble-root *{box-sizing:border-box;margin:0;padding:0}

/* ── Root ── */
.yetana-bubble-root{position:fixed;z-index:var(--yb-z,9999);pointer-events:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

/* ── Positions ── */
.yetana-bubble-root.yb-pos-bottom-right{bottom:var(--yb-oy,24px);right:var(--yb-ox,24px)}
.yetana-bubble-root.yb-pos-bottom-left {bottom:var(--yb-oy,24px);left:var(--yb-ox,24px)}
.yetana-bubble-root.yb-pos-top-right   {top:var(--yb-oy,24px);right:var(--yb-ox,24px)}
.yetana-bubble-root.yb-pos-top-left    {top:var(--yb-oy,24px);left:var(--yb-ox,24px)}
.yetana-bubble-root.yb-pos-center-right{top:50%;right:var(--yb-ox,24px);transform:translateY(-50%)}
.yetana-bubble-root.yb-pos-center-left {top:50%;left:var(--yb-ox,24px);transform:translateY(-50%)}
.yetana-bubble-root.yb-pos-center      {top:50%;left:50%;transform:translate(-50%,-50%)}

/* ── Bubble ── */
.yb-bubble{
  position:relative;border-radius:50%;cursor:pointer;pointer-events:all;
  overflow:hidden;background:var(--yb-accent,#ee0979);
  box-shadow:0 4px 24px rgba(0,0,0,.28);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
  animation:ybBubbleIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
.yb-bubble:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(0,0,0,.35)}
.yb-bubble:focus-visible{outline:3px solid var(--yb-accent,#ee0979);outline-offset:3px;border-radius:50%}
.yb-bubble.yb-minimized{animation:ybBubbleReturn .4s cubic-bezier(.34,1.56,.64,1) both}
.yb-size-small  .yb-bubble{width:52px;height:52px}
.yb-size-medium .yb-bubble{width:68px;height:68px}
.yb-size-large  .yb-bubble{width:88px;height:88px}

.yb-bubble-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%}
.yb-bubble-thumb img{width:100%;height:100%;object-fit:cover}
.yb-bubble-default-icon{width:55%;height:55%;color:white}

/* Pulse */
.yb-pulse-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--yb-accent,#ee0979);opacity:0;animation:ybPulse 2s ease-out infinite;pointer-events:none}
.yb-no-pulse .yb-pulse-ring{display:none}

/* Live dot */
.yb-live-dot{position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--yb-accent,#ee0979);border:2px solid white;pointer-events:none}

/* ── Overlay ── */
.yb-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.62);
  z-index:calc(var(--yb-z,9999) - 1);
  cursor:pointer;
  animation:ybFadeIn .25s ease both;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.yb-overlay.yb-visible{display:block}

/* ── Player (corner mode) ── */
.yb-player{
  position:absolute;width:200px;height:360px;
  border-radius:16px;background:#111;
  display:flex;flex-direction:column;overflow:hidden;
  pointer-events:all;box-shadow:0 16px 60px rgba(0,0,0,.55);
}
.yb-player[hidden]{display:none!important}

.yb-pos-bottom-right .yb-player,.yb-pos-center-right .yb-player{bottom:0;right:0;transform-origin:bottom right;animation:ybExpandIn .35s cubic-bezier(.34,1.56,.64,1) both}
.yb-pos-bottom-left  .yb-player,.yb-pos-center-left  .yb-player{bottom:0;left:0;transform-origin:bottom left;animation:ybExpandIn .35s cubic-bezier(.34,1.56,.64,1) both}
.yb-pos-top-right    .yb-player{top:0;right:0;transform-origin:top right;animation:ybExpandIn .35s cubic-bezier(.34,1.56,.64,1) both}
.yb-pos-top-left     .yb-player{top:0;left:0;transform-origin:top left;animation:ybExpandIn .35s cubic-bezier(.34,1.56,.64,1) both}
.yb-pos-center       .yb-player{bottom:0;left:50%;transform:translateX(-50%);transform-origin:bottom center;animation:ybExpandIn .35s cubic-bezier(.34,1.56,.64,1) both}

/* ── Center modal player ── */
.yb-player.yb-modal{
  position:fixed;
  width:min(380px,92vw);
  height:auto;
  max-height:90vh;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  transform-origin:center;
  animation:ybModalIn .38s cubic-bezier(.34,1.56,.64,1) both;
  z-index:var(--yb-z,9999);
  border-radius:20px;
  bottom:auto!important;right:auto!important;
}
/* In modal mode, images can size naturally */
.yb-player.yb-modal .yb-video-stage{max-height:65vh}

/* ── Close btn ── */
.yb-close-btn{
  position:absolute;top:10px;right:10px;z-index:4;
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.25);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:white;transition:background .2s,transform .15s;
}
.yb-close-btn:hover{background:rgba(255,255,255,.22);transform:scale(1.1)}
.yb-close-btn svg{width:10px;height:10px}

/* ── Media stage (video + image + gif all go here) ── */
.yb-video-stage{
  flex:1;position:relative;background:#0a0a0a;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  min-height:0; /* flex fix */
}
.yb-video-stage video,.yb-video-stage iframe{width:100%;height:100%;object-fit:cover;border:none;display:block}

/* ── GIF ── */
.yb-video-stage img.yb-gif{width:100%;height:100%;object-fit:cover;display:block}

/* ── Image popup ── */
.yb-video-stage img.yb-image{
  width:100%;height:100%;object-fit:contain;display:block;
  background:#0a0a0a;
}
/* If wrapped in a link */
.yb-video-stage a.yb-image-link{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.yb-video-stage a.yb-image-link img.yb-image{width:100%;height:100%}

/* Image caption bar */
.yb-image-caption{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:10px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  color:white;font-size:12px;font-weight:500;
  pointer-events:none;
}

/* ── Thumbnail overlay (shown before play starts) ── */
.yb-thumb-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;
}
.yb-thumb-overlay img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.yb-thumb-play-btn{
  position:relative;z-index:1;
  width:56px;height:56px;border-radius:50%;
  background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.75);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s,background .2s;
}
.yb-thumb-overlay:hover .yb-thumb-play-btn{transform:scale(1.12);background:rgba(0,0,0,.78)}
.yb-thumb-play-btn svg{width:20px;height:20px;margin-left:3px}

/* ── Player bar (video only) ── */
.yb-player-bar{flex-shrink:0;padding:10px 12px 12px;background:rgba(255,255,255,.06)}
.yb-player-bar.yb-hidden{display:none}
.yb-player-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:8px}
.yb-player-title{font-size:11px;font-weight:500;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.yb-player-duration{font-size:10px;color:rgba(255,255,255,.4);flex-shrink:0}
.yb-progress-track{height:3px;background:rgba(255,255,255,.15);border-radius:2px;cursor:pointer;margin-bottom:8px}
.yb-progress-fill{height:100%;background:var(--yb-accent,#ee0979);border-radius:2px;width:0%;transition:width .1s linear}
.yb-player-controls{display:flex;align-items:center;justify-content:space-between}
.yb-ctrl{background:none;border:none;cursor:pointer;padding:4px;color:rgba(255,255,255,.6);transition:color .2s;display:flex;align-items:center}
.yb-ctrl:hover{color:white}
.yb-ctrl svg{width:12px;height:12px}
.yb-play-pause svg{width:14px;height:14px}

/* ── Image action bar ── */
.yb-image-bar{
  flex-shrink:0;padding:8px 12px;
  background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.yb-image-bar.yb-hidden{display:none}
.yb-image-bar-title{font-size:11px;color:rgba(255,255,255,.85);font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yb-image-link-btn{
  flex-shrink:0;font-size:10px;color:white;text-decoration:none;
  background:var(--yb-accent,#ee0979);padding:4px 10px;border-radius:20px;
  transition:opacity .2s;white-space:nowrap;
}
.yb-image-link-btn:hover{opacity:.85}

/* ── Playlist ── */
.yb-playlist{background:#0d0d0d;padding:8px;display:flex;flex-direction:column;gap:4px;max-height:120px;overflow-y:auto;flex-shrink:0}
.yb-playlist[hidden]{display:none!important}
.yb-pl-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;transition:background .18s}
.yb-pl-item:hover{background:rgba(255,255,255,.08)}
.yb-pl-item.yb-active{background:rgba(255,255,255,.13)}
.yb-pl-thumb{width:32px;height:32px;border-radius:6px;flex-shrink:0;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;overflow:hidden}
.yb-pl-thumb img{width:100%;height:100%;object-fit:cover}
.yb-pl-type-badge{font-size:14px;line-height:1}
.yb-pl-info{flex:1;min-width:0}
.yb-pl-title{font-size:10px;font-weight:500;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yb-pl-meta{font-size:9px;color:rgba(255,255,255,.35);display:flex;gap:4px;align-items:center}

/* ── Keyframes ── */
@keyframes ybBubbleIn{from{transform:scale(0) translateY(16px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes ybBubbleReturn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ybExpandIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ybModalIn{from{transform:translate(-50%,-50%) scale(.7);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes ybFadeIn{from{opacity:0}to{opacity:1}}
@keyframes ybPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.45);opacity:0}}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  .yb-bubble,.yb-player,.yb-player.yb-modal{animation:none!important;transition:none!important}
  .yb-pulse-ring{animation:none!important;display:none}
}