/* VELVET ROOM CREATOR-SCOPED PUBLISH STATUS R155 — persistent percentage */
.vrPublishStatusR22{
  appearance:none;
  width:calc(100% - 28px);
  margin:10px 14px 12px;
  min-height:72px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border:1px solid rgba(190,88,255,.38);
  border-radius:16px;
  background:rgba(18,12,25,.97);
  color:#fff;
  text-align:left;
  box-shadow:none;
}
.vrPublishStatusR22[hidden]{display:none!important}
.vrPublishStatusSpinnerR22{
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:#d54cff;
  animation:vrR22PublishSpin .8s linear infinite;
}
.vrPublishStatusCopyR22{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.vrPublishStatusCopyR22 strong{
  font-size:14px;
  line-height:1.15;
  font-weight:900;
}
.vrPublishStatusCopyR22 small{
  font-size:11px;
  line-height:1.3;
  color:rgba(255,255,255,.62);
}
.vrPublishStatusR22[data-state="failed"]{
  border-color:rgba(255,92,92,.55);
}
.vrPublishStatusR22[data-state="complete"]{
  border-color:rgba(91,224,146,.55);
}
@keyframes vrR22PublishSpin{to{transform:rotate(360deg)}}

/* R155: percentage replaces the old moving progress line.
   The card itself remains mounted for the full publish lifecycle. */
.vrPublishStatusTrackR22,
.vrPublishStatusBarR22{display:none!important}
.vrPublishStatusPercentR155{
  min-width:58px;
  flex:0 0 auto;
  margin-left:auto;
  text-align:right;
  font-size:18px;
  line-height:1;
  font-weight:950;
  letter-spacing:.01em;
  color:#f4d7ff;
  font-variant-numeric:tabular-nums;
}
.vrPublishStatusR22[data-state="complete"] .vrPublishStatusPercentR155{
  color:#75e6a4;
}
.vrPublishStatusR22[data-state="failed"] .vrPublishStatusPercentR155{
  color:#ff9b9b;
}
/* R398B: one stable progress track. Indeterminate movement means activity,
   never an invented byte count; 100% requires confirmed publication. */
.vrPublishStatusR22 .vrR398bProgressTrack{
 display:block!important;width:100%;height:7px;position:relative;overflow:hidden;
 border-radius:999px;background:rgba(255,255,255,.14);margin-top:7px
}
.vrPublishStatusR22 .vrR398bProgressFill{
 display:block!important;height:100%;border-radius:999px;
 background:linear-gradient(90deg,#9851dc,#dc99ff);
 transition:width .2s ease-out
}
.vrPublishStatusR22 .vrR398bProgressTrack[data-known="0"] .vrR398bProgressFill{
 animation:vrR398bIndeterminate 1.9s ease-in-out infinite alternate;
 opacity:.9
}
.vrPublishStatusR22[data-state="complete"] .vrR398bProgressFill{background:#75e6a4}
.vrPublishStatusR22[data-state="failed"] .vrR398bProgressFill{background:#ef8b8b}
@keyframes vrR398bIndeterminate{
 from{transform:translateX(0)}to{transform:translateX(280%)}
}
@media(prefers-reduced-motion:reduce){
 .vrPublishStatusR22 .vrR398bProgressFill{transition:none!important;animation:none!important}
}
@media(max-width:360px){
  .vrPublishStatusR22{
    gap:9px;
    padding-left:11px;
    padding-right:11px;
  }
  .vrPublishStatusPercentR155{min-width:50px;font-size:16px}
}