.yfsb{ --yfsb-accent:#111; --yfsb-bg:#eee; --yfsb-h:12px; font:500 14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif }
.yfsb__msg{ margin-bottom:6px; color:#222 }
.yfsb__bar{ position:relative; width:100%; background:var(--yfsb-bg); height:var(--yfsb-h); border-radius:999px; overflow:hidden }
.yfsb__fill{ display:block; height:100%; background:var(--yfsb-accent); border-radius:999px; transition:width .35s ease }
.yfsb__icon{ position:absolute; top:50%; transform:translate(-50%,-50%); color:var(--yfsb-accent); transition:left .35s ease, transform .2s ease; }
.yfsb__icon:active{ transform:translate(-50%,-50%) scale(0.95); }

/* Sticky container */
.yfsb-sticky{ position:fixed; left:0; right:0; z-index:9998; background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 10px 30px rgba(0,0,0,.1); padding:10px 16px; display:flex; align-items:center; gap:12px }
.yfsb-sticky--bottom{ bottom:0; border-radius:12px 12px 0 0 }
.yfsb-sticky--top{ top:0; border-radius:0 0 12px 12px }
.yfsb-sticky__close{ margin-left:auto; background:#eee; border:0; width:28px; height:28px; border-radius:999px; cursor:pointer }

/* Responsive tweaks */
@media (max-width: 640px){
  .yfsb{ font-size:13px }
  .yfsb__msg{ margin-bottom:4px }
  .yfsb{ --yfsb-h:10px }
  #yfsb-sticky{ padding:8px 12px }
  .yfsb__icon svg{ width:16px; height:16px }
}
@media (max-width: 420px){
  .yfsb{ font-size:12px }
  .yfsb__msg{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
}