/*
 * [2026-09-23] Strona pobierania `/t/{url}` po przejściu na powłokę Bootstrap 5
 * (`home_wrapper.php`) - Marcin: *„musimy dorobić wrapper dla widoku pobierania
 * jak ktoś po prostu wklepie url transferu"*. Wcześniej strona stała na własnym
 * `t/wrapper.php` z Bootstrapem 4.6.2, jQuery i arkuszami `syg/assets/css`.
 *
 * Tu są WYŁĄCZNIE rzeczy, których nie ma w Bootstrapie 5 ani w `home.css`:
 *   1. awatary (`.avatar*`) - skopiowane 1:1 z `app-panel.css`, żeby nadawca
 *      wyglądał tak samo jak w panelu (nie ma sensu trzeci wariant awatara),
 *   2. lista plików transferu,
 *   3. podgląd multimediów i tryb „na całą szerokość" (`body.media_full`) -
 *      port z `syg/assets/helpers/helper.css`; tamten plik zostaje dla starych
 *      widoków, tutaj go NIE ładujemy (ma gołe selektory elementów i nadpisuje
 *      Bootstrapa - patrz `CLAUDE/patterns/2026-09-12_foreign-stylesheet-bare-element-selector.md`).
 *
 * Sam odtwarzacz HLS (`.syg-*`) ma własny arkusz `syg/assets/helpers/hls-player.css`,
 * dokładany przez widok tylko gdy film jest gotowy - bez zmian.
 */

/* ----------------------------------------------------------- lista plików */

.download-files {
  display: flex;
  flex-direction: column;
}

/* [2026-09-28] Lista ma limit wysokości i przewija się w środku - Marcin: przy setkach
   plików pobierający musiał przewinąć całą listę, żeby dojść do „Pobierz”. Wcześniej
   (przed BS5) było tak samo: `.files-list { max-height: 250px }` z wygaszeniem na dole.
   Wygaszenie to gradient w kolorze karty nałożony na dół ramki (`.download-files-fade`),
   kończący się przed paskiem przewijania - maska na samej liście wygaszała też pasek
   (Marcin: „wcześniej było lepiej, bo scroll nie wchodził pod maskę”). Ostatnie 2rem
   listy to `padding-bottom`, więc po przewinięciu do końca ostatni plik wyjeżdża ponad
   gradient, a krótka lista wygląda bez zmian (gradient trafia w pusty padding). */
.download-files-fade {
  position: relative;
}

.download-files-fade::after {
  content: '';
  position: absolute;
  left: 0;
  right: .75rem;
  bottom: 0;
  height: 2rem;
  pointer-events: none;
  background: linear-gradient(to top, var(--bs-card-bg), transparent);
}

.download-files--scroll {
  max-height: 18rem;
  overflow-y: auto;
  padding-bottom: 2rem;
  scrollbar-width: thin;
}

/* Gdy lista się przewija, treść kończy się przed pasem paska przewijania - tak jak
   gradient wyżej, więc wygaszenie obejmuje cały wiersz (Marcin: „ucina z prawej”).
   Klasę ustawia skrypt w `t/partials/download.php`; krótka lista jej nie dostaje
   i rozmiary plików zostają w linii z nagłówkiem karty. */
.download-files--scroll.is-overflowing {
  padding-right: .75rem;
}

/* Z galerią obrazy mają do 480px - w okienku 18rem byłyby nieczytelne. */
.download-files--scroll.download-files--gallery {
  max-height: 70vh;
}

.download-file {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.download-file:last-child {
  border-bottom: 0;
}

.download-file__icon {
  flex: 0 0 auto;
  color: var(--bs-secondary-color);
}

.download-file__name {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.download-file__size {
  flex: 0 0 auto;
  color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

/* [2026-09-26] Miniaturka obrazu zamiast ikony pliku („File preview” w ustawieniach
   transferu) - nieklikalna, z jednorazowym tokenem (`t/partials/download.php`). */
.download-file__thumb {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
}

/* Z miniaturkami ikony pozostałych plików dostają tę samą szerokość kolumny,
   żeby nazwy plików zaczynały się w jednej linii. */
.download-files--thumbs .download-file__icon {
  width: 2.5rem;
  text-align: center;
}

/* Podgląd obrazu w galerii pod jego wierszem. */
.download-file-preview {
  padding-bottom: 1rem;
}


/* -------------------------------------------------- notatka przy transferze */
/* [2026-09-23] Nie „komentarze", tylko wiadomość, z którą nadawca wysłał pliki -
   rozmowa toczy się w wątku w panelu. Stąd cichy blok w karcie transferu, a nie
   osobna karta z nagłówkiem i polem odpowiedzi. */

.download-note {
  padding: .9rem 1rem;
  border-radius: .75rem;
  background-color: var(--bs-body-bg);
}

/* ------------------------------------------------------ podgląd multimediów */
/* Port z `syg/assets/helpers/helper.css` - te same wartości, zawężone do strony
   pobierania i bez zmiennych starego motywu (`--always-light`). */

.media-container {
  position: relative;
}

.media-player,
.media-image-preview {
  max-height: 480px;
  border-radius: .75rem;
}

.media-player {
  background: #000;
  border-radius: 0;
}

.media-image-preview {
  object-fit: contain;
}

/* [2026-09-26] Podgląd pojedynczego PDF-a (`t/partials/pdf_preview.php`) - przewijane
   okienko o wysokości podglądu obrazu, strony jako białe kartki. Wysokość po
   powiększeniu niżej, razem z `.media-image-preview`. */
.media-pdf-preview {
  max-height: 480px;
  border-radius: .75rem;
  background-color: var(--bs-tertiary-bg);
}

/* [2026-09-28] Zasłona z loaderem nad całym podglądem PDF, do narysowania pierwszej
   strony (`t/partials/pdf_preview.php`). Nad przyciskiem powiększenia - do tego czasu
   nie ma czego powiększać. */
.media-pdf-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: .75rem;
  background-color: var(--bs-tertiary-bg);
}

.media-pdf-page {
  flex: 0 0 auto;
  overflow: hidden;
  background-color: #fff;
}

.media-pdf-page canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* [2026-09-26] Miejsce na obraz, zanim się załaduje (`t/partials/image_preview.php`) -
   dawniej inline `style="height: 240px"` w `download.php`. */
.media-image-loader {
  height: 240px;
}

.media-toggle {
  position: absolute;
  right: .4rem;
  top: .4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  background-color: rgba(32, 32, 32, .81);
  color: #fff;
  font-size: small;
  opacity: 0;
  transition: opacity .3s;
}

.media-toggle:hover,
.media-toggle:focus-visible {
  color: #fff;
}

[agent=mobile] .media-toggle {
  display: none;
}

.media_mouse_active .media-container:hover .media-toggle {
  opacity: 1;
}

.media-container:hover {
  cursor: none;
}

.media_mouse_active .media-container:hover {
  cursor: default;
}

/* Tryb „na całą szerokość": kolumna treści przestaje ograniczać podgląd.
   [2026-09-25] Samo `.site-main` nie wystarczało - kartę trzyma `.focus-center`
   (`max-width: 36rem` w `home.css`), więc po kliknięciu lupki rosła tylko
   wysokość obrazka i wyglądało to jakby przycisk nic nie robił (zmierzone przy
   oknie 1440: `.site-main` 1008 -> 1440 px, karta 576 -> 576 px). Zdejmujemy
   ograniczenie z obu, a podgląd dostaje sufit na wysokość ekranu, żeby po
   powiększeniu mieścił się w kadrze zamiast spychać resztę karty poza ekran. */
.media_full .site-main,
.media_full .site-main .focus-center {
  max-width: none;
}

.media_full .media-player,
.media_full .media-image-preview,
.media_full .media-pdf-preview {
  max-height: calc(100dvh - var(--home-header-space) - 8rem);
}

.media_full .media-image-preview {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .media-toggle {
    transition: none;
  }
}