/* r17-r8: visual/UX polish for the shared sequential upload panel. Additive overlay only. */
.dq-storage-upload-float{
  width:min(410px,calc(100vw - 28px));
  max-height:min(72vh,610px);
  display:flex;
  flex-direction:column;
}
.dq-storage-upload-float>header{
  flex:0 0 auto;
  padding:11px 13px;
  gap:10px;
}
.dq-storage-upload-float>header>div:first-child{gap:1px}
.dq-storage-upload-float>header button{width:28px;height:28px;border-radius:8px}

/* Only the item region scrolls. Header and footer remain permanently visible. */
.dq-storage-upload-float-list{
  flex:1 1 auto;
  min-height:0;
  max-height:min(42vh,320px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.dq-storage-upload-float-list::-webkit-scrollbar{width:8px}
.dq-storage-upload-float-list::-webkit-scrollbar-track{background:transparent}
.dq-storage-upload-float-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--dq-storage-brand,#65e4cf) 22%,#1c3344);border-radius:999px}

/* Compact four-column item layout: icon | content | state | action. */
.dq-storage-upload-float-list article,
.dq-storage-upload-float-list article.finalizing{
  grid-template-columns:26px minmax(0,1fr) auto auto;
  align-items:center;
  column-gap:8px;
  row-gap:4px;
  padding:9px 12px;
  min-height:58px;
}
.dq-storage-upload-float-list article>i{width:23px;height:23px;border-radius:7px;align-self:start;margin-top:1px}
.dq-storage-upload-float-list article>div{gap:1px;align-self:center}
.dq-storage-upload-float-list article b{line-height:1.25}
.dq-storage-upload-float-list article small{line-height:1.25}
.dq-storage-upload-float-list article>span{align-self:start;margin-top:2px;font-size:.66rem!important}
.dq-storage-upload-float-list article>button,
.dq-storage-upload-float-list article button.dq-storage-upload-item-cancel{
  grid-column:4;
  grid-row:1;
  align-self:start;
  justify-self:end;
  margin:0;
  min-height:28px;
  padding:4px 8px;
  border-radius:8px;
  white-space:nowrap;
  font-size:.68rem!important;
}
.dq-storage-upload-float-list article.pending button.dq-storage-upload-item-cancel{padding-inline:8px}
.dq-storage-upload-float-list article.error>button{grid-column:2/5;grid-row:auto;justify-self:start;margin-top:4px}

.dq-storage-upload-item-progress{margin-top:5px;height:4px;border-radius:999px;overflow:hidden}
.dq-storage-upload-bytes{margin-top:2px!important}
.dq-storage-upload-stage{margin-top:4px;min-height:17px;gap:6px}
.dq-storage-upload-stage>i{width:10px;height:10px;border-width:2px}
.dq-storage-upload-stage>span{font-size:.68rem!important;line-height:1.25!important}

/* Fixed batch footer: summary stays readable and global cancellation never scrolls away. */
.dq-storage-upload-float>footer{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  min-height:52px;
  padding:8px 12px;
  gap:10px;
  border-top:1px solid #183244;
  background:linear-gradient(180deg,rgba(8,22,33,.98),rgba(6,18,28,.99));
  box-shadow:0 -8px 20px rgba(0,0,0,.12);
}
.dq-storage-upload-float>footer>span{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.35;
}
.dq-storage-upload-float>footer .dq-storage-upload-footer-actions{flex:0 0 auto;gap:7px}
.dq-storage-upload-float>footer .dq-storage-upload-cancel{
  min-height:30px;
  padding:5px 9px!important;
  white-space:nowrap;
  line-height:1.15!important;
}

/* Completed/cancelled/pending rows collapse naturally because they do not reserve progress space. */
.dq-storage-upload-float-list article.pending,
.dq-storage-upload-float-list article.done,
.dq-storage-upload-float-list article.cancelled,
.dq-storage-upload-float-list article.skipped{min-height:50px}

@media(max-width:560px){
  .dq-storage-upload-float{right:10px;bottom:10px;width:calc(100vw - 20px);max-height:72vh}
  .dq-storage-upload-float-list{max-height:40vh}
  .dq-storage-upload-float-list article,.dq-storage-upload-float-list article.finalizing{grid-template-columns:24px minmax(0,1fr) auto;padding:9px 10px}
  .dq-storage-upload-float-list article>span{grid-column:3}
  .dq-storage-upload-float-list article>button,.dq-storage-upload-float-list article button.dq-storage-upload-item-cancel{grid-column:2/4;grid-row:auto;justify-self:start;margin-top:3px}
  .dq-storage-upload-float>footer{align-items:flex-end}
  .dq-storage-upload-float>footer>span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}