/* 20.3.0 the DOWNLOADS panel (hub/ui/downloads.js): one card per file at the bottom right; full width on a phone. */
.dlx { position:fixed; right:16px; bottom:16px; z-index:9000; display:flex; flex-direction:column; gap:8px; width:min(360px, calc(100vw - 24px)); pointer-events:none; }
.dlx[hidden] { display:none; }
.dlx-it { pointer-events:auto; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-left:3px solid var(--acc); border-radius:10px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.35); font-size:13px; min-width:0; transition:opacity .4s; }
.dlx-it[data-state="saved"], .dlx-it[data-state="browser"], .dlx-it[data-state="app"] { border-left-color:var(--ok); }
.dlx-it[data-state="failed"] { border-left-color:var(--bad); }
.dlx-it[data-state="cancelled"] { border-left-color:var(--dim); }
.dlx-it[data-state="cancelled"] .dlx-ic { color:var(--dim); }
.dlx-top { display:flex; align-items:center; gap:8px; min-width:0; }
.dlx-ic { flex:none; width:18px; text-align:center; color:var(--acc); font-weight:700; }
.dlx-it[data-state="saved"] .dlx-ic, .dlx-it[data-state="browser"] .dlx-ic, .dlx-it[data-state="app"] .dlx-ic { color:var(--ok); }
.dlx-it[data-state="failed"] .dlx-ic { color:var(--bad); }
.dlx-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dlx-close { flex:none; background:none; border:0; color:var(--dim); font-size:17px; line-height:1; cursor:pointer; padding:0 2px; }
.dlx-close:hover { color:var(--ink); }
.dlx-bar { height:4px; border-radius:2px; background:color-mix(in srgb, var(--ink) 12%, transparent); margin:8px 0 6px; overflow:hidden; }
.dlx-bar > i { display:block; height:100%; width:0; background:var(--acc); transition:width .2s; }
.dlx-bar.dlx-ind > i { width:35%; animation:dlxInd 1.2s ease-in-out infinite; }
@keyframes dlxInd { 0% { transform:translateX(-100%); } 100% { transform:translateX(300%); } }
.dlx-line { color:var(--dim); font-size:12px; margin-top:4px; overflow-wrap:anywhere; }
.dlx-hint { color:var(--dim); font-size:11px; margin-top:4px; opacity:.85; overflow-wrap:anywhere; }
.dlx-acts { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.dlx-fade { opacity:0; }
@media (max-width:700px) { .dlx { left:12px; right:12px; width:auto; bottom:calc(12px + env(safe-area-inset-bottom)); } .dlx-it:nth-last-child(n+3) { display:none; } }
@media print { .dlx { display:none !important; } }