/*
 * [2026-09-13] Wspólny wygląd uploadera na Bootstrapie 5.3.8 - okno "New
 * transfer" w panelu (`.panel-window`) i strona główna (`.home-uploader`).
 * Przeniesione BEZ ZMIAN z `app-panel.css` (tokeny SYGBase + dropzone + shim
 * klas BS4 wstrzykiwanych przez `uploader_js.php`) - jedyna zmiana to zasięg
 * selektorów rozszerzony z `.panel-window` na `:is(.panel-window, .home-uploader)`.
 * Ładowany przez `apppanel_wrapper.php` i `home_wrapper.php`.
 *
 * Nadal obowiązuje reguła z 2026-09-12 (patrz komentarz przy tokenach niżej i
 * `CLAUDE/patterns/2026-09-12_foreign-stylesheet-bare-element-selector.md`):
 * NIE importować `syg/assets/css/styles.min.css`, każdy selektor zawężony.
 */

/* [2026-09-12, KOREKTA po zgłoszonym błędzie] Nazwane tokeny SYGBase, których
 * potrzebują pliki dzielone z resztą apki, ale których panel nie definiuje -
 * `syg/assets/helpers/uploader.css` (kontakty/tagi odbiorców w oknie "New
 * transfer") i `syg/assets/helpers/hls-player.css` (customowy odtwarzacz).
 *
 * Pierwsza wersja tej poprawki ładowała CAŁY `syg/assets/css/styles.min.css`
 * (źródło tych tokenów w starym motywie) - to ZEPSUŁO layout panelu: ten plik
 * ma m.in. GOŁY selektor elementu `main{margin-top:74px;width:calc(100% -
 * 180px);...}` (bez żadnej klasy), a nasz `<main class="d-flex
 * app-page-content">` jest DOKŁADNIE takim `<main>` - dostawał ten margines i
 * zawężoną szerokość niezależnie od własnych klas, stąd cały panel "opadł do
 * dołu" i się zwęził. Element-owy selektor bije wszystko po klasie bez
 * względu na kolejność `<link>`ów, więc "załaduj to jako pierwsze" (poprzednia
 * poprawka) NIE chroniło przed tym konkretnym przypadkiem.
 *
 * Naprawione WŁAŚCIWIE: definiujemy TYLKO SAME NAZWY zmiennych, których te
 * pliki faktycznie czytają przez `var(--nazwa)` - to jest bezpieczne, bo
 * zmienna CSS sama w sobie niczego nie stosuje, dopóki jakaś reguła jej nie
 * użyje, a żadna z tych nazw nie jest referencjowana przez żaden goły
 * selektor elementu w całym repo (sprawdzone). Wizualny wygląd dropzone'y
 * (`.uploader-base`, ikona, teksty) jest RĘCZNIE PRZEPISANY niżej w tym
 * pliku, zamiast importowany - też celowo, z tego samego powodu. */
/* [2026-09-13] `, [data-bs-theme]` jest load-bearing: `var(--bs-body-bg)` itd.
   rozwiązuje się tam, gdzie zmienna jest ZADEKLAROWANA. Motyw (`data-bs-theme`)
   siedzi na `<body>` obu wrapperów, więc na samym `:root` tokeny brały wartości
   JASNEGO motywu - stąd biała ramka na hover dropzone (`--background-color` =
   #fff) w ciemnym motywie. Deklaracja na elemencie z motywem liczy je od nowa. */
:root,
[data-bs-theme] {
  --always-light: #fff;
  --primary: var(--bs-primary);
  --color: var(--bs-body-color);
  --color-muted: var(--bs-secondary-color);
  --text-muted: var(--bs-secondary-color);
  --card-background: var(--bs-body-secondary-bg);
  --border-radius: var(--bs-border-radius);
  --gray-0: var(--bs-tertiary-bg);
  --gray-50: var(--bs-secondary-bg);
  --background-color: var(--bs-body-bg);
  --btn-group-toggle-background: var(--bs-tertiary-bg);
  --uploader-background: var(--bs-tertiary-bg);
  --uploader-active-background: var(--bs-secondary-bg);
  --uploader-border-color: var(--bs-border-color);
}

/* --- zgodność z BS4-owymi klasami wstrzykiwanymi przez `uploader_js.php` ---
   Baner słabego/zerwanego połączenia (`#upload_connection_banner`) i kilka
   fragmentów listy kontaktów są budowane w locie przez WSPÓLNY, żywy skrypt
   `partials/uploader_js.php` (ten sam plik co w starych, Bootstrap-4-owych
   widokach) i mają wpisane na sztywno klasy `mr-*`/`ml-*` - w BS 5.3.8 tych
   klas nie ma (odpowiednik to `me-*`/`ms-*`). Nie ruszamy tego wspólnego pliku
   dla samego cosmetic fallbacku - dopisujemy tu equivalent tylko w zasięgu
   okna, żeby ikony miały odstęp od tekstu tam, gdzie skrypt je tworzy. */
:is(.panel-window, .home-uploader) .mr-1 { margin-right: .25rem; }
:is(.panel-window, .home-uploader) .mr-2 { margin-right: .5rem; }
:is(.panel-window, .home-uploader) .mr-3 { margin-right: 1rem; }
:is(.panel-window, .home-uploader) .ml-1 { margin-left: .25rem; }
:is(.panel-window, .home-uploader) .ml-2 { margin-left: .5rem; }

/* --------------------------------------------- dropzone "New transfer" ---
   [2026-09-12] Wygląd `.uploader-base`/`.upload-icon` w oknie "New transfer" -
   RĘCZNIE PRZEPISANY z `syg/assets/css/styles.min.css` (skąd realnie pochodzi
   ten komponent), a NIE importowany wprost - patrz komentarz przy `:root`
   wyżej dlaczego. Każda reguła tutaj jest CELOWO zawężona przedrostkiem
   `.panel-window` - w tym pliku, w odróżnieniu od oryginału, żaden selektor
   nie ma prawa dotknąć niczego POZA oknem uploadera. */

:is(.panel-window, .home-uploader) .uploader-base {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
}

:is(.panel-window, .home-uploader) .uploader-base::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* background-color: var(--uploader-background); */
  border-radius: calc(var(--border-radius) * 2);
  /* Wyliczone właściwości, nie skrót "wszystkie" - patrz komentarz przy canvasie
     gradientu niżej (migotanie od kolizji z animacją). */
  transition: border-radius .3s, inset .3s, opacity .3s, background-color .3s;
}

:is(.panel-window, .home-uploader) .uploader-base::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: calc(var(--border-radius) * 2);
  box-shadow: inset 0 0 0 0 var(--background-color), inset 0 0 0 1px var(--uploader-border-color);
  transition: border-radius .3s, inset .3s, box-shadow .3s;
}

/* [2026-09-22] "Karta wsuwa się w tło" przy najechaniu / przeciąganiu pliku.
   Wcześniej: `::after` rysował na brzegu 10-pikselowy pas w kolorze tła, który
   ZASŁANIAŁ powierzchnię (`::before`) i gradient. Obie warstwy mają ten sam
   zaokrąglony brzeg, więc ich wygładzone krawędzie prześwitywały spod pasa -
   jasny łuk w rogu (Marcin, zrzut z 2026-09-22). Teraz same warstwy cofają
   się o 10 px (`inset`, canvas przez `clip-path`) - kształt jak dawniej
   (zewnętrzny promień ×3.5 minus pas = wewnętrzny), ale nic niczego nie
   przykrywa, więc nie ma szwu. */
:is(.panel-window, .home-uploader) .uploader-base.init:hover::before,
:is(.panel-window, .home-uploader) .upload-drag-over-active.uploader-base::before {
  inset: 10px;
  border-radius: calc(var(--border-radius) * 3.5 - 10px);
}

:is(.panel-window, .home-uploader) .uploader-base.init:hover::after,
:is(.panel-window, .home-uploader) .upload-drag-over-active.uploader-base::after {
  inset: 10px;
  border-radius: calc(var(--border-radius) * 3.5 - 10px);
}

:is(.panel-window, .home-uploader) .uploader-base.init:active::before {
  opacity: .1;
  background-color: var(--uploader-background);
}

:is(.panel-window, .home-uploader) .uploader-main-init {
  position: absolute;
  inset: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
}

:is(.panel-window, .home-uploader) .upload-icon {
  font-size: 2.75rem;
  color: var(--color);
  display: flex;
  justify-content: center;
  opacity: .5;
}

:is(.panel-window, .home-uploader) .upload-icon .upi-shelf,
:is(.panel-window, .home-uploader) .upload-icon .upi-shelf-direct {
  opacity: 0;
  transition: .3s;
}

:is(.panel-window, .home-uploader) .upload-icon .upi-arrow {
  transform: translateY(2px);
  transition: .3s;
}

:is(.panel-window, .home-uploader) .upload-desc,
:is(.panel-window, .home-uploader) .upload-drop {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 1.5rem;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: .3s;
  transform: translateY(.4rem);
}

:is(.panel-window, .home-uploader) .uploader-base.init:hover .upload-desc,
:is(.panel-window, .home-uploader) .upload-drag-over-active.uploader-base .upload-drop {
  opacity: .4;
  transform: translateY(0);
}

:is(.panel-window, .home-uploader) .upload-drag-over-active.uploader-base .upload-desc {
  display: none;
}

:is(.panel-window, .home-uploader) .upload-desc-mobile {
  display: none;
  color: var(--color);
  opacity: 0;
}


/* [2026-09-22] Canvas animowanego gradientu (`syg/assets/js/nectar-grad.js`,
   `.gradient-container` na `#upload_stage_init`) - reguły przepisane z
   `syg/assets/css/styles.min.css`, którego panel nie ładuje (patrz komentarz
   przy tokenach wyżej). Bez nich canvas stał w przepływie nad dropzone'ą.
   Od 2026-09-22 także strona główna (`.home-uploader`).
   Promienie jak `.uploader-base::before` (×2 w spoczynku, ×3.5 na hover i przy
   przeciąganiu pliku), `z-index: -1` = pod pierścieniem `::after`. */
:is(.panel-window, .home-uploader) .gradient-container > canvas {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  /* 1 px pod obrysem (`::after`) - krawędź na krawędzi dawała jasną obwódkę. */
  clip-path: inset(1px round calc(var(--border-radius) * 2 - 1px));
  /* [2026-09-23] Migotanie przy najechaniu (Marcin): canvas miał JEDNOCZEŚNIE
     3-sekundową animację `opacity` i skrót `transition: .3s`, który obejmuje
     WSZYSTKIE właściwości - każda klatka animacji wpadała jeszcze w przejście
     i obie rzeczy walczyły o tę samą wartość. Teraz: przejście wyłącznie dla
     kształtu, a `opacity` należy tylko do animacji pojawienia (`both`).
     [2026-09-23] Marcin: "spowolnij to pojawianie się canvas trochę" - 1.2s.
     Kolizji już nie ma, więc dłuższe wejście niczym nie grozi: najechanie
     rusza wyłącznie `clip-path`. */
  animation: uploader-gradient-in 5s var(--ease-out, ease) both;
  transition: clip-path .3s;
}

/* Ten sam kształt co powierzchnia na najechaniu (patrz "wsuwa się w tło"). */
:is(.panel-window, .home-uploader) .uploader-base.init:hover .gradient-container > canvas,
:is(.panel-window, .home-uploader) .upload-drag-over-active.uploader-base.init .gradient-container > canvas {
  clip-path: inset(11px round calc(var(--border-radius) * 3.5 - 11px));
}

@keyframes uploader-gradient-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================ uploader 2026-09-19 ===
   Przebudowa etapów 2 i 3 (`app/partials/uploader.php`) - Marcin:
   "potrzebujemy minimalizmu, jakości, schludności i próby przeprojektowania
   uploadera". Zasady: jeden pionowy rytm (odstępy zamiast `<hr>`), włosowe
   linie `--bs-border-color-translucent`, kolory WYŁĄCZNIE ze zmiennych
   Bootstrapa (jasny/ciemny dostraja Marcin w `custom-bootstrap-5.3.8`), ruch
   z tokenów transitions.dev (`transitions.css`), żadnych cieni, przycisk
   główny w kolorze tekstu, nie w `primary`. Zasięg jak wyżej: tylko okno
   panelu i strona główna. */

:is(.panel-window, .home-uploader) .uploader-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  text-align: left;
}

/* --- nagłówek: licznik | dodaj pliki / folder */
:is(.panel-window, .home-uploader) .uploader-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .85rem;
  color: var(--bs-secondary-color);
}

:is(.panel-window, .home-uploader) .uploader-head__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

:is(.panel-window, .home-uploader) .uploader-head__dot {
  opacity: .5;
}

:is(.panel-window, .home-uploader) .uploader-upgrade {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-left: .25rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  background-color: var(--bs-secondary-bg);
  font-size: .75rem;
  color: var(--bs-body-color);
  text-decoration: none;
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}

:is(.panel-window, .home-uploader) .uploader-upgrade:hover {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

:is(.panel-window, .home-uploader) .uploader-upgrade i {
  font-size: .6rem;
}

:is(.panel-window, .home-uploader) .uploader-head__actions {
  display: flex;
  flex: 0 0 auto;
  gap: .15rem;
}

:is(.panel-window, .home-uploader) .uploader-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: .8rem;
  color: var(--bs-secondary-color);
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}

:is(.panel-window, .home-uploader) .uploader-icon-button:hover,
:is(.panel-window, .home-uploader) .uploader-icon-button:focus-visible {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-emphasis-color);
}

/* --- lista plików: wiersze na włosowych liniach, "x" dopiero po najechaniu */
:is(.panel-window, .home-uploader) .uploader-files {
  max-height: 13.5rem;
  margin-top: -.5rem;
  overflow-y: auto;
  border-top: 1px solid var(--bs-border-color-translucent);
  scrollbar-width: thin;
}

:is(.panel-window, .home-uploader) .uploader-files.is-overflowing {
  padding-right: .75rem;
}

:is(.panel-window, .home-uploader) .uploader-file {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  font-size: .875rem;
}

:is(.panel-window, .home-uploader) .uploader-file:last-child {
  border-bottom: 0;
}

:is(.panel-window, .home-uploader) .uploader-file__icon {
  flex: 0 0 auto;
  font-size: .8rem;
  color: var(--bs-secondary-color);
}

:is(.panel-window, .home-uploader) .uploader-file__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--bs-emphasis-color);
}

:is(.panel-window, .home-uploader) .uploader-file__size {
  flex: 0 0 auto;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color);
}

:is(.panel-window, .home-uploader) .uploader-file__remove {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: .75rem;
  color: var(--bs-secondary-color);
  opacity: 0;
  transition: opacity var(--duration-quick) var(--ease-out), background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}

:is(.panel-window, .home-uploader) .uploader-file:hover .uploader-file__remove,
:is(.panel-window, .home-uploader) .uploader-file__remove:focus-visible {
  opacity: 1;
}

:is(.panel-window, .home-uploader) .uploader-file__remove:hover {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-emphasis-color);
}

@media (hover: none) {
  :is(.panel-window, .home-uploader) .uploader-file__remove {
    opacity: 1;
  }
}

/* --- ustawienia */
:is(.panel-window, .home-uploader) .uploader-settings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Link / Email - Tabs sliding na całą szerokość */
:is(.panel-window, .home-uploader) .uploader-type {
  display: flex;
  width: 100%;
}

:is(.panel-window, .home-uploader) .uploader-type .t-tab {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin: 0;
  font-size: .85rem;
}

:is(.panel-window, .home-uploader) .uploader-type .t-tab i {
  font-size: .7rem;
}

:is(.panel-window, .home-uploader) .uploader-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .8rem;
  color: var(--bs-secondary-color);
}

:is(.panel-window, .home-uploader) .uploader-help {
  font-size: .75rem;
  line-height: 1.45;
  color: var(--bs-secondary-color);
}

:is(.panel-window, .home-uploader) .uploader-help:not(.d-block) {
  display: block;
  margin-top: .35rem;
}

:is(.panel-window, .home-uploader) .form-check-label .uploader-help {
  display: inline;
  margin: 0 0 0 .35rem;
}

:is(.panel-window, .home-uploader) .uploader-settings .form-control {
  border-color: var(--bs-border-color-translucent);
  border-radius: .6rem;
  background-color: var(--bs-body-bg);
  font-size: .875rem;
}

/* [2026-09-20] Stan focusu pól NIE jest tu nadpisywany - siedzi w
   `custom-bootstrap-5.3.8/bootstrap.css` (obrys w kolorze tekstu zamiast
   niebieskiej poświaty), wspólny dla całej apki na BS5. */

/* "Options" - Accordion expand (transitions.dev 21), bez pudełka: tylko
   linie nad i pod nagłówkiem. */
:is(.panel-window, .home-uploader) .uploader-options {
  border-top: 1px solid var(--bs-border-color-translucent);
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

:is(.panel-window, .home-uploader) .uploader-options__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .75rem 0;
  border: 0;
  background: none;
  font-size: .85rem;
  color: var(--bs-secondary-color);
  transition: color var(--duration-quick) var(--ease-out);
}

:is(.panel-window, .home-uploader) .uploader-options__head:hover,
:is(.panel-window, .home-uploader) .uploader-options[data-open="true"] .uploader-options__head {
  color: var(--bs-emphasis-color);
}

:is(.panel-window, .home-uploader) .uploader-options .t-acc-chevron svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* [2026-09-23] Obwódka focusu nie może być obcinana. Marcin: *„focusy przycina"* -
   akordeon „Options" chowa nadmiar treści przez `overflow: hidden` na
   `.t-acc-panel-inner` (to on daje animację rozwijania), a pierwszy element wiersza
   stoi dokładnie na jego krawędzi: zmierzone `linkLeft = innerLeft = 404 px`, obwódka
   3 px, czyli 3 px poza obszarem widocznym - i po lewej stronie znikała.

   Przesuwamy CAŁY obszar przycinania o 4 px w lewo i o tyle samo wpychamy treść
   padding-iem: układ zostaje bez zmian (treść dalej zaczyna się w tym samym miejscu),
   a obwódka ma się gdzie zmieścić. Ujemny margines na samym wierszu by nie pomógł -
   przycina rodzic, nie wiersz. */
:is(.panel-window, .home-uploader) .uploader-options .t-acc-panel-inner {
  margin-inline: -4px;
  padding-inline: 4px;
}

:is(.panel-window, .home-uploader) .uploader-options__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: .25rem 0 1.25rem;
}

:is(.panel-window, .home-uploader) .uploader-section {
  margin: .5rem 0 -.25rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

:is(.panel-window, .home-uploader) .uploader-field.form-check {
  margin: 0;
}

:is(.panel-window, .home-uploader) .uploader-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--bs-body-color);
  text-decoration: none;
}

:is(.panel-window, .home-uploader) .uploader-link:hover {
  color: var(--bs-emphasis-color);
}

:is(.panel-window, .home-uploader) .uploader-link i {
  font-size: .65rem;
}

/* Przycisk wysyłki - w kolorze tekstu (odwrócony), nie w `primary`; lekki
   `scale` przy wciśnięciu zamiast cienia. */
:is(.panel-window, .home-uploader) .uploader-submit {
  width: 100%;
  height: 2.9rem;
  border: 0;
  border-radius: .75rem;
  background-color: var(--bs-emphasis-color);
  font-weight: 500;
  color: var(--bs-body-bg);
  transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out);
}

:is(.panel-window, .home-uploader) .uploader-submit:hover {
  opacity: .88;
}

:is(.panel-window, .home-uploader) .uploader-submit:active {
  transform: scale(.98);
}

:is(.panel-window, .home-uploader) .uploader-submit:disabled {
  opacity: .4;
}

/* --- etap 3: postęp */
:is(.panel-window, .home-uploader) .uploader-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

:is(.panel-window, .home-uploader) .uploader-progress__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

:is(.panel-window, .home-uploader) .uploader-ring__track {
  stroke: var(--bs-border-color-translucent);
}

:is(.panel-window, .home-uploader) .uploader-ring__value {
  stroke: var(--bs-emphasis-color);
}

:is(.panel-window, .home-uploader) .uploader-ring__percent {
  font-size: 1.9rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--bs-emphasis-color);
}

:is(.panel-window, .home-uploader) .uploader-progress__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color);
}

:is(.panel-window, .home-uploader) .uploader-text-button {
  padding: .25rem .75rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: .8rem;
  color: var(--bs-secondary-color);
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}

:is(.panel-window, .home-uploader) .uploader-text-button:hover {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-emphasis-color);
}

:is(.panel-window, .home-uploader) .uploader-settings .form-check-label {
  font-size: .875rem;
  color: var(--bs-body-color);
}

/* [2026-09-23] Ekran po wysyłce - Marcin: "ten widok jest brzydki".
   Zasady: wyśrodkowany w karcie (nie przyklejony do góry z pustą połową pod
   spodem), zwężony do czytelnej kolumny, jeden rytm odstępów, link w pigułce
   z okrągłym przyciskiem kopiowania (jak reszta panelu), jeden przycisk
   główny i cichy link obok - zamiast dwóch prostokątów tej samej wagi. */
/* [2026-09-23] Wszystko przy lewej krawędzi karty (Marcin: „dajmy done do
   lewej (...) tytuł transferu do lewej względem inputu, czyli cały ten blok
   musimy zblokować"): nagłówek na pełną szerokość, a nazwa, pole z linkiem i
   przycisk tworzą JEDEN blok o tej samej szerokości i tej samej lewej
   krawędzi. */
:is(.panel-window, .home-uploader) .uploader-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: left;
}

/* Nagłówek: znaczek w jednej linii z "Done!", zdanie pod spodem, całość przy
   lewej krawędzi kolumny (układ pokazany przez Marcina). */
:is(.panel-window, .home-uploader) .uploader-success__head {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  margin-bottom: 2rem;
}

:is(.panel-window, .home-uploader) .uploader-success__title {
  margin: 0;
  font-size: 1.25rem;
  color: var(--bs-emphasis-color);
}

/* Nazwa transferu - element o wadze treści, nad linkiem (ważniejsza niż sam
   link i niż "Open transfer"). */
:is(.panel-window, .home-uploader) .uploader-success__name {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  margin: 0 0 .6rem;
  color: var(--bs-body-color);
  font-size: 1rem;
}

:is(.panel-window, .home-uploader) .uploader-success__name i {
  flex: 0 0 auto;
  color: var(--bs-secondary-color);
}

:is(.panel-window, .home-uploader) .uploader-success__name span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:is(.panel-window, .home-uploader) .uploader-success__text {
  margin: .15rem 0 0;
  color: var(--bs-secondary-color);
  font-size: .9rem;
}

/* Pole z linkiem: pełna szerokość kolumny, ten sam promień co przycisk niżej,
   żeby oba czytały się jako jedna para (pokaż link → skopiuj). Po kliknięciu
   "Copy link" pole pokazuje na chwilę "Copied!" z ptaszkiem (`is-copied`) -
   tak jak w starym ekranie (Marcin). */
:is(.panel-window, .home-uploader) .uploader-success__link {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: .6rem;
  padding: .7rem 1rem;
  border: 1px solid transparent;
  border-radius: .75rem;
  background-color: var(--bs-secondary-bg);
  transition: border-color var(--duration-quick) var(--ease-out);
}

:is(.panel-window, .home-uploader) .uploader-success__url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bs-body-color);
  font-size: .9rem;
  text-overflow: ellipsis;
}

:is(.panel-window, .home-uploader) .uploader-success__url:focus {
  outline: 0;
}

:is(.panel-window, .home-uploader) .uploader-success__copied-mark {
  display: none;
  flex: 0 0 auto;
  margin-left: .5rem;
  /* color: var(--bs-success); */
}

/* Stan po skopiowaniu: "Copied!" i ptaszek w zwykłym kolorze tekstu, do tego
   krawędź `--bs-secondary` (wartości ustawione przez Marcina 2026-09-23 -
   bez koloru "success"). Ten sam stan ma powłoka transferu. */
:is(.panel-window, .home-uploader) .uploader-success__link.is-copied {
  border-color: var(--bs-secondary);
}

:is(.panel-window, .home-uploader) .uploader-success__link.is-copied .uploader-success__copied-mark {
  display: inline-block;
}

/* Główna akcja ekranu: wielkość i wygląd 1:1 z przyciskiem "Upload"
   (`.uploader-submit`), tu tylko szerokość kolumny i wyśrodkowanie treści. */
:is(.panel-window, .home-uploader) .uploader-success__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:is(.panel-window, .home-uploader) .uploader-success__actions {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: 1.25rem;
}


/* [2026-09-23] Krążek znaczka "Done!" - 1:1 z demo transitions.dev
   (`.p10-check`): tło #35BA00 i cztery cienie (wewnętrzna włosowa kreska 5%
   czerni, miękki cień, szersza poświata, wewnętrzne podświetlenie od dołu).
   Cienie siedzą na WRAPPERZE, nie na SVG - dzięki temu `filter: blur()` z
   animacji "Success check" rozmywa je razem z krążkiem. */
:is(.panel-window, .home-uploader) .upload-success-check {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 48px;
  background: #35BA00;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .05) inset,
    0 1px 1px 0 rgba(0, 0, 0, .10),
    0 1px 4px 0 rgba(0, 0, 0, .08),
    0 -1px 1px 0 rgba(0, 0, 0, .09) inset;
}

:is(.panel-window, .home-uploader) .upload-success-check svg {
  width: 48px;
  height: 48px;
}