/* =====================================================================
   skool PWA — coada încărcărilor (js/pwa/incarcari-ui.js) · docs/spec/21-incarcari.md §6, §10
   Bara mare de jos (pe orice ecran), lista „Încărcări”, căsuțele cu starea fiecărui fișier, banda „Reia · Renunță”.
   Doar tokens (luminos și întunecat le au deja în tokens.css); textul peste poze pe --scrim-media / --on-media.
   Prefix: up-.
   ===================================================================== */

/* ---------------- spațiul de jos: ce urcă stă deasupra barei (--up-bar-h, pus de incarcari-ui.js; 0 fără bară) ---------------- */
:root { --up-bar-h: 0px; }
:root { --sh-bottom-space: calc(var(--tabbar-h) + var(--safe-bottom) + 64px + var(--up-bar-h)); }
@media (min-width: 768px) { :root { --sh-bottom-space: calc(var(--sp-6) + var(--up-bar-h)); } }
.ui-toasts { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3) + var(--up-bar-h)); }
@media (min-width: 768px) { .ui-toasts { bottom: calc(var(--sp-6) + var(--up-bar-h)); } }
.ui-fab--fixed { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-4) + var(--up-bar-h)); }
@media (max-width: 767px) {
  .mesaje-chat--page .mesaje-chat__composer { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--up-bar-h)); }
  .sh:has(.mesaje-chat--page) .sh-footnote { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--up-bar-h)); }
}
html { scroll-padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px + var(--up-bar-h)); }

/* ---------------- bara (spec §6.2) ---------------- */
.up-root__bar { position: fixed; z-index: calc(var(--z-tabbar) + 2); left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right));
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px); pointer-events: none; }
.up-root.is-kb .up-root__bar { display: none; }
@media (min-width: 768px) {
  .up-root__bar { left: auto; right: calc(var(--gutter) + var(--safe-right)); bottom: calc(var(--sp-4) + var(--safe-bottom)); width: min(420px, calc(100vw - 2 * var(--gutter))); }
}
.up-bar {
  pointer-events: auto; display: grid; gap: 7px; width: 100%; min-height: 52px; padding: 10px 14px 11px; border-radius: var(--r-md);
  text-align: left; font: inherit; color: var(--on-inverse-surface); background: var(--inverse-surface); box-shadow: var(--sh-3);
  transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
  animation: up-in var(--dur-3) var(--ease-decelerate);
}
.up-bar:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--sh-3); }
/* titlul și dreapta pe un rând; când nu încap (320 px, „poți închide aplicația”), dreapta trece sub titlu, aliniată la dreapta */
.up-bar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
.up-bar__ic { flex: none; display: grid; place-items: center; width: 20px; height: 20px; }
.up-bar__ic .ui-i { width: 18px; height: 18px; }
.up-bar__t { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body-s); font-weight: var(--fw-semibold); }
.up-bar__sub { flex: none; margin-left: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-caption); font-weight: var(--fw-medium); opacity: .85; font-variant-numeric: tabular-nums; }
.up-bar__badge { flex: none; display: inline-flex; align-items: center; gap: 3px; min-height: 20px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--danger); color: var(--on-danger); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.up-bar__badge .ui-i { width: 12px; height: 12px; }
.up-bar__track { display: block; height: 4px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, currentColor 22%, transparent); }
.up-bar__fill { display: block; height: 100%; width: calc(var(--p, 0) * 1%); border-radius: inherit; background: var(--inverse-primary); transition: width var(--dur-3) var(--ease-standard); }
.up-bar--activ .up-bar__ic { color: var(--inverse-primary); }
.up-bar--warn { background: var(--warning-soft); color: var(--warning-ink); box-shadow: var(--sh-2); border: 1px solid color-mix(in srgb, var(--warning-ink) 22%, transparent); }
.up-bar--warn .up-bar__fill { background: var(--warning-ink); }
.up-bar--err { background: var(--danger); color: var(--on-danger); }
.up-bar--err .up-bar__sub { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
@keyframes up-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------- cercul care se învârte (clipul pe server) ---------------- */
.up-spin { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: up-spin 0.9s linear infinite; }
.up-spin--sm { width: 16px; height: 16px; border-width: 2px; }
@keyframes up-spin { to { transform: rotate(360deg); } }

/* ---------------- căsuțele (spec §6.4) ---------------- */
.up-tile { position: relative; display: block; overflow: hidden; container-type: inline-size; isolation: isolate; cursor: pointer; padding: 0; border: 0; background: var(--surface-3); color: var(--on-media); -webkit-touch-callout: none; user-select: none; }
.up-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.up-tile__art { position: absolute; inset: 0; display: grid; place-items: center; color: var(--subtle); }
.up-tile__art .ui-i { width: 28%; height: 28%; min-width: 18px; min-height: 18px; }
.up-tile__ov { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: var(--scrim-media); color: var(--on-media);
  font-size: var(--fs-caption); font-weight: var(--fw-bold); line-height: 1.2; text-align: center; padding: 4px; }
.up-tile__ov--col { grid-auto-flow: row; place-content: center; justify-items: center; gap: 4px; }
.up-tile__ov .ui-i { width: 22px; height: 22px; }
.up-tile__lbl { max-width: 100%; overflow-wrap: anywhere; }
.up-tile__ov--err { background: color-mix(in srgb, var(--danger) 70%, transparent); color: var(--on-danger); }
.up-tile__ov--ok { background: none; place-items: end; padding: 6px; }
/* bifa pe --success: --surface e deschis în tema luminoasă și închis în cea întunecată, ca --success (contrast în ambele) */
.up-tile__ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--success); color: var(--surface); box-shadow: var(--sh-1); }
.up-tile__ok .ui-i { width: 14px; height: 14px; stroke-width: 2.6; }
.up-ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--on-media) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--on-media) 28%, transparent) 0); }
.up-ring__in { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--scrim-media); font-size: 11px; font-variant-numeric: tabular-nums; }
.up-tile__badge { position: absolute; left: 6px; bottom: 6px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 4px; border-radius: 6px;
  background: var(--scrim-media); color: var(--on-media); font-size: 10.5px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; pointer-events: none; }
.up-tile__badge .ui-i { width: 10px; height: 10px; fill: currentColor; }
.up-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* miniaturi mici (jurnalul, 56 px): fără text, doar semnul */
@container (max-width: 72px) {
  .up-tile__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .up-ring { width: 34px; height: 34px; } .up-ring__in { width: 28px; height: 28px; font-size: 9.5px; }
  .up-tile__badge { left: 3px; bottom: 3px; padding: 1px 3px; } .up-tile__badge span { display: none; }
  .up-tile__ov .ui-i { width: 18px; height: 18px; }
}
/* în grilele de poze: căsuța umple celula, ca poza */
.albume-cell > .up-tile, .albume-stack__grid .up-tile { height: 100%; }
.activitati-jr-thumbs .up-tile { width: 56px; height: 56px; border-radius: var(--r-sm); flex: none; aspect-ratio: auto; }
.jurnal-grid .up-tile { border-radius: var(--r-md); }
/* poza abia încărcată: ✓ 2,5 s pe poza din store (spec §6.4) */
.is-just-done { position: relative; }
/* cercul verde și bifa (bifa e o mască: culoarea vine din token, nu din imagine) */
.is-just-done::before, .is-just-done::after { content: ""; position: absolute; right: 6px; bottom: 6px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; animation: up-pop var(--dur-3) var(--ease-spring); }
.is-just-done::before { background: var(--success); box-shadow: var(--sh-1); }
.is-just-done::after { background: var(--surface);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9 17.5l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9 17.5l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
@keyframes up-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------- lista „Încărcări” (spec §6.3) ---------------- */
.up-list { display: grid; gap: var(--sp-4); min-width: 0; }
.up-grp { display: grid; gap: var(--sp-2); min-width: 0; }
.up-grp__t { margin: 0; font-size: var(--fs-label-s); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.up-rows { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; min-width: 0; }
.up-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; border-radius: var(--r-sm); }
.up-row.is-hl { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-ink); }
.up-row__th { position: relative; width: 44px; height: 44px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: var(--surface-3); color: var(--subtle); }
.up-row__th img { width: 100%; height: 100%; object-fit: cover; }
.up-row__th .ui-i { width: 20px; height: 20px; }
.up-row__play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-media); background: color-mix(in srgb, var(--scrim-media) 60%, transparent); }
.up-row__play .ui-i { width: 14px; height: 14px; fill: currentColor; }
.up-row__b { display: grid; gap: 2px; min-width: 0; }
.up-row__n { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-row__s { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); overflow-wrap: anywhere; }
.up-row--err .up-row__s { color: var(--danger-ink); }
.up-row--warn .up-row__s { color: var(--warning-ink); }
.up-row--ok .up-row__s { color: var(--success-ink); }
.up-row__pl { font-size: var(--fs-caption); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-row__bar { margin-top: 4px; height: 4px; }
.up-row__acts { display: flex; align-items: center; gap: 4px; }
.up-row__btn { display: grid; place-items: center; width: var(--touch); height: var(--touch); border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); }
.up-row__btn:hover { background: var(--surface-2); }
.up-row__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.up-row__btn--retry { border-color: transparent; background: var(--danger-soft); color: var(--danger-ink); }
.up-row__again { white-space: nowrap; }
.up-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }
.up-note .ui-i { flex: none; margin-top: 2px; }
.up-note--warn { color: var(--warning-ink); }
.up-list__empty { margin: 0; color: var(--muted); }
.up-list__acts { display: flex; gap: var(--sp-2); position: sticky; bottom: 0; padding-top: var(--sp-2); background: var(--surface); }
.up-list__acts .ui-btn { flex: 1 1 0; justify-content: center; min-width: 0; white-space: normal; text-align: center; }
.up-menu { display: grid; gap: 4px; }
.up-menu__k { margin: 0; font-size: var(--fs-label-s); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.up-menu__why { margin: 0; color: var(--ink); line-height: var(--lh-body-s); }

/* ---------------- banda „Ai lăsat N încărcări neterminate” (spec §6.5) ---------------- */
.sh-band:empty { display: none; }
.sh-band { box-sizing: border-box; width: calc(100% - 2 * var(--gutter)); max-width: var(--content-max); margin: var(--sp-3) auto 0; }
.up-band { background: var(--warning-soft); color: var(--warning-ink); border: 1px solid color-mix(in srgb, var(--warning-ink) 20%, transparent); }
.up-band .ui-callout__title { color: var(--warning-ink); }
.up-band p { color: var(--ink-2); }
.up-band .up-band__lost { color: var(--warning-ink); font-weight: var(--fw-medium); }
.up-band .ui-callout__actions { flex-wrap: wrap; }

/* ---------------- mișcarea și contrastul forțat ---------------- */
@media (prefers-reduced-motion: reduce) {
  .up-bar, .is-just-done::before, .is-just-done::after { animation: none; }
  .up-bar, .up-bar__fill { transition: none; }
  .up-spin { animation: none; border-top-color: color-mix(in srgb, currentColor 30%, transparent); border-right-color: currentColor; }
}
@media (forced-colors: active) {
  .up-bar { border: 2px solid CanvasText; }
  .up-bar__fill { background: Highlight; forced-color-adjust: none; }
  .up-ring { forced-color-adjust: none; background: conic-gradient(Highlight calc(var(--p, 0) * 1%), Canvas 0); }
}

/* foaia contului: încărcările neterminate se șterg la ieșire (spec 21 §5.2) */
.pwa-account__warn { display: flex; align-items: flex-start; gap: 8px; margin: var(--sp-3) 0 0; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--warning-soft); color: var(--warning-ink); font-size: var(--fs-body-s); line-height: var(--lh-body-s); }
.pwa-account__warn .ui-i { flex: none; margin-top: 3px; }
/* „Se încarcă acum” din Poze și din fila Poze a jurnalului */
.albume-stack__grp--up .albume-stack__title { color: var(--ink); }
.jurnal-pgroup--up .jurnal-pgroup__t { display: flex; align-items: center; gap: 6px; }
/* chatul: mesajul cu poze încă în coadă — bula „se trimite…”, cu căsuțele pozelor (spec 21 §6.5) */
.mesaje-msg.is-pending .mesaje-msg__time { font-style: italic; }
.mesaje-msg__fail { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--danger-ink); }
.mesaje-msg__fail .ui-i { flex: none; margin-top: 2px; }
.mesaje-chatphs .up-tile.mesaje-chatph { cursor: pointer; }
/* mesajul care n-a plecat: „Trimite din nou” / „Renunță la mesaj”, sub text, pe rând nou la 320 px */
.mesaje-msg__pacts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.mesaje-msg__pacts .ui-btn { min-height: 44px; }