/* =====================================================================
   GUEST DOCKS — rail plutajućih ploha u gostinskom kutu
   =====================================================================
   Povod: BRIEF_GOSTI_RUNDA2 § 8 (P4). Dokaz su snimke
   `docs/screenshots/gosti-2026-07-27/IMG_0810.png` i `IMG_0811.png`:
   na 390 px ploča playliste (`#dwVinyl`) i launcher poruka (`#gcLauncher`,
   inicijali mladenaca — na snimci „AI" jer su Ana i Ivan) stoje jedan
   iznad drugoga i **režu rečenicu** („ne treb…", „Osta…"). To nije ukras
   nego prepreka.

   Tri pravila koja ovaj fajl provodi:

   1. JEDAN IZVOR ISTINE ZA KUT. Sve plohe čitaju iste tokene
      (`--gp-dock-*`), pa se ne mogu ni preklopiti ni razići kad se jedna
      promijeni. Prije ovoga je svaka komponenta sama računala svoj
      `bottom` iz tuđih brojeva (`calc(74px + 56px + 12px + …)`).
   2. NA MOBITELU JEDAN RED, NE STUP. Dvije plohe u istom kutu okomito
      su zauzimale ~140 px visine i sjekle 4–5 redaka teksta. Sad stoje
      jedna do druge (launcher u kutu, ploča lijevo od njega) pa je
      zauzeta traka visoka koliko najviša ploha.
   3. SADRŽAJ IMA PROSTOR + PLOHE SE SKLANJAJU. Dno sadržaja dobiva
      `padding` u visini raila (safe-area aware, postavljeno u
      `shell_guest.html` gdje `.gp-main` i živi), a skrol prema dolje
      plohe skloni (`body.gp-docks-gone`).

   Zašto id-selektori: pozicijska pravila komponenti žive u inline
   `<style>` blokovima (`_vinyl_player.html`, `_guest_chat_dock.html`),
   koji se u dokumentu pojavljuju POSLIJE ovog fajla. Klasa-na-klasu bi
   izgubila po redoslijedu; id (1,1,0) pobjeđuje bez `!important`.
   ===================================================================== */

:root {
  --gp-dock-safe:   env(safe-area-inset-bottom, 0px);
  --gp-dock-navbar: 0px;    /* desktop: nema donjeg nava */
  --gp-dock-inset:  24px;   /* razmak plohe od donjeg ruba (ili od nava) */
  --gp-dock-side:   24px;   /* razmak od desnog ruba */
  --gp-dock-gap:    12px;   /* razmak IZMEĐU dviju ploha */
  --gp-dock-chat:   64px;   /* .dalia-chat-btn (desktop launcher) */
  --gp-dock-vinyl:  72px;   /* #dwVinyl ploča */

  /* Donji rub raila — sve plohe kreću odavde. */
  --gp-dock-base:   calc(var(--gp-dock-navbar) + var(--gp-dock-safe) + var(--gp-dock-inset));
  /* Okomita visina koju rail stvarno zauzima — toliko sadržaj dobiva na dnu.
     Desktop: ploča stoji IZNAD launchera (stup). */
  --gp-dock-band:   calc(var(--gp-dock-chat) + var(--gp-dock-gap) + var(--gp-dock-vinyl));
}

@media (max-width: 768px) {
  :root {
    /* .gp-bottom-nav, bez safe-area (ona je zasebno). Jedini izvor visine —
       `shell_guest.html` čita ovaj token, ne svoj broj. 58 → 50 (Vedran
       2026-08-02): ispod natpisa je bilo 11px zraka, iznad ikone 8px, jer
       `line-height: normal` na Manrope daje 1.6 pa natpis nosi ~5px praznog
       vodstva. Vodstvo je stegnuto na 1.15, a visina spuštena na iOS mjeru
       tab bara (49–50). Dodirna meta ostaje cijela traka = 50px > 44px HIG. */
    --gp-dock-navbar: 50px;
    --gp-dock-inset:  16px;
    --gp-dock-side:   16px;
    --gp-dock-chat:   46px;  /* .gc-launcher (Vedran 2026-07-31: smanjen s 56) */
    /* Jedan red → traka je visoka koliko najviša ploha, ne zbroj obiju. */
    --gp-dock-band:   var(--gp-dock-vinyl);
  }
}

/* ── Pozicije ───────────────────────────────────────────────────────── */

/* Chat launcher (≤768px) — ostaje u vanjskom kutu, primarna je radnja. */
#gcLauncher {
  right:  var(--gp-dock-side);
  bottom: var(--gp-dock-base);
}

/* Dalia FAB (≥769px, gost) — isti rail kao couple, ali iz tokena. */
.dalia-chat-btn {
  right:  var(--gp-dock-side);
  bottom: var(--gp-dock-base);
}

@media (min-width: 769px) {
  /* Desktop: ploča iznad FAB-a (stup). Vrijednost je identična dosadašnjoj
     (24 + 64 + 12 = 100px), samo više nije prepisana rukom. */
  #dwVinyl.dwv--guest {
    right:  var(--gp-dock-side);
    bottom: calc(var(--gp-dock-base) + var(--gp-dock-chat) + var(--gp-dock-gap));
  }
}

@media (max-width: 768px) {
  /* Mobitel: ploča LIJEVO od launchera, dna poravnata — jedan red. */
  #dwVinyl.dwv--guest {
    right:  calc(var(--gp-dock-side) + var(--gp-dock-chat) + var(--gp-dock-gap));
    bottom: var(--gp-dock-base);
  }
  /* Mini-player se razmata ulijevo; s novog ishodišta 300px bi na 360 px
     izašlo iz ekrana, pa se traka reže na raspoloživo. */
  #dwVinyl.dwv--guest.dwv-open .dwv-pill {
    width: min(300px, calc(100vw - var(--gp-dock-side) - var(--gp-dock-chat)
                           - var(--gp-dock-gap) - 12px));
  }
}

/* Dalia dock na QR stranici poklona (`/poziv/<token>/pokloni`) — nema
   donjeg nava, ali ima isti rail i istu safe-area. */
#gd-wrap {
  right:  var(--gp-dock-side);
  bottom: var(--gp-dock-base);
}
/* Ta stranica nema `.gp-bottom-nav`, pa rail ne rezervira njegovu visinu.
   `--gp-dock-base` se MORA ponovno izračunati ovdje: var() se supstituira ondje
   gdje je svojstvo deklarirano, pa bi sama promjena `--gp-dock-navbar` ostavila
   naslijeđenu bazu s :root-a netaknutom (izmjereno u pregledniku: bottom je
   ostajao 74px). Bez `:has()` podrške FAB sjedne 58 px više — nikad preko
   sadržaja, pa je to prihvatljiv pad. */
body:has(#gd-wrap) {
  --gp-dock-navbar: 0px;
  --gp-dock-base:   calc(var(--gp-dock-safe) + var(--gp-dock-inset));
}
/* Sadržaj te stranice dobiva prostor koliko FAB zauzima. `[data-template]`
   je omotač gift-body-ja u `guest/gifts.html`; `:has()` drži pravilo na
   stranicama koje dock stvarno imaju (bez podrške samo izostane padding). */
body:has(#gd-wrap) [data-template] {
  padding-bottom: calc(var(--gp-dock-base) + 52px + 20px);
}

/* ── Sklanjanje pri skrolu prema dolje ──────────────────────────────────
   Ista obitelj kao `dw-corner--gone` (VISUAL_CANON § 2.2) — asistentski
   kut koji se povuče na skrol prema dolje i vrati na skrol prema gore.
   Ovdje se pravilo proširuje s jedne ikone na cijeli gostinski rail.
   Navigacija se NE miče: `.gp-bottom-nav`, topbar i ladica ostaju gdje su
   (N1/N2 lekcija). Kontroler je u `shell_guest.html` /
   `_guest_dalia_dock.html`. ─────────────────────────────────────────── */

#gcLauncher,
#dwVinyl.dwv--guest,
.dalia-chat-btn,
#gd-wrap {
  transition: transform   .26s var(--ease, cubic-bezier(.22, 1, .36, 1)),
              opacity     .2s,
              box-shadow  .3s;
}

body.gp-docks-gone #gcLauncher,
body.gp-docks-gone #dwVinyl.dwv--guest,
body.gp-docks-gone .dalia-chat-btn,
body.gp-docks-gone #gd-wrap {
  transform: translateY(calc(var(--gp-dock-base) + var(--gp-dock-band) + 24px));
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #gcLauncher,
  #dwVinyl.dwv--guest,
  .dalia-chat-btn,
  #gd-wrap { transition: none; }

  /* Bez klizanja — ploha jednostavno nije tu (stanje ostaje čitljivo). */
  body.gp-docks-gone #gcLauncher,
  body.gp-docks-gone #dwVinyl.dwv--guest,
  body.gp-docks-gone .dalia-chat-btn,
  body.gp-docks-gone #gd-wrap {
    transform: none;
    visibility: hidden;
  }
}