/* ============================================================================
   PORTAL CHROME CSS — dijeljeni izgled chrome sloja (couple + guest)
   ----------------------------------------------------------------------------
   Jedan izvor za CSS koji je prije bio copy-paste u shell_couple.html i
   shell_guest.html: notif panel, profil/avatar meni i webkit scrollbar pseudo.
   Prati JS dedup (static/js/portal-chrome.js) i markup (_notif_panel.html).

   OVDJE su SAMO rule koje su bile byte-identicne u oba shella. Per-portal
   razlike NAMJERNO ostaju u svom shellu (nisu drift, nego stvarne razlike):
     - zvonce (.notif-bell zlatni couple vs .gp-notif-bell prasnjavo-plavi guest)
     - .couple-profile BAZA (guest = flex red bell+avatar; couple = samo avatar)
     - .couple-profile__item svg stroke (guest ima stroke:currentColor)
     - theme-icon selektor (#dwThemeToggle vs .dw-theme-toggle)
     - scrollbar-color na portal-specificnim kontejnerima (.couple-main/.gp-main)
     - dark-mode override kartica (.cd-card / .dl-* — portal-specificne plohe)
   Registar: docs/PORTAL_SHARED_SURFACES.md. Guard: scripts/check_portal_surfaces.py.
   ============================================================================ */

/* ── PLUTAJUĆI KUT — jedan sloj, jedan kut (WP7, Bruno 2026-07-29) ─────────
   Povod: "izskace ovaj radio… tu se zbagao opet ovaj radio" + nalaz N15
   (docs/audits/NALAZI_SNIMKE_2026-07-29.md): ploča playliste je stajala preko
   sadržaja, preko polja za unos u postavkama i preko same fotografije u
   lightboxu, a Dalia FAB je dijelio isti z-index s njom (raw 10002 naspram
   --z-dock-vinyl 10002) pa je poredak ovisio o redoslijedu u DOM-u.

   Tri pravila koja ovaj blok provodi:

   1. JEDAN KUT. Plutajuće akcije portala mladenaca čitaju iste tokene
      (`--dw-dock-*`) i slažu se u stup od donjeg ruba prema gore, pa se ne
      mogu preklopiti ni razići kad se jedna promijeni. Portal gostiju ima
      svoju izvedbu ISTOG pravila u `static/css/guest-docks.css`
      (`--gp-dock-*`, rail s donjim navom) — dva skupa tokena se ne miješaju.
   2. JEDAN SLOJ. z-index dolazi iz registra u `dalia-portal.css`
      (`--z-dock-*`): asistent (chat) ispod glazbene ploče, nijedan dock
      iznad plohe koja je preuzela ekran.
   3. PLOHA KOJA JE PREUZELA EKRAN GASI DOCK. Lightbox i chat panel/oblačić
      sklone ploču s ekrana; zvuk se NE prekida (audio svira i dok je element
      skriven), vraća se čim se ploha zatvori.

   Zašto id-selektori: pozicijska pravila komponente žive u inline <style>
   bloku (`_vinyl_player.html`) koji se u dokumentu pojavljuje POSLIJE ovog
   fajla. Klasa-na-klasu bi izgubila po redoslijedu; id (1,1,0) pobjeđuje bez
   `!important`. Isti razlog i ista praksa kao u guest-docks.css.
   Registar: docs/DALIA_VISUAL_CANON.md § 2.2 (`dw-dock-rail`). */
:root {
  --dw-dock-side:   20px;  /* razmak plohe od desnog ruba */
  --dw-dock-inset:  20px;  /* razmak od donjeg ruba */
  --dw-dock-gap:    12px;  /* razmak IZMEĐU dviju ploha */
  --dw-dock-assist: 64px;  /* .dalia-chat-btn — asistent sjedi u kutu */
  /* Visina donje navigacije ljuske pod plohom. Na desktopu je nema, pa je 0.
     ⚠️ Ovdje je do 13.8.2026. pisalo da je ploha u desnom kutu „i bez ovoga
     iznad trake jer stoji jedan slot više". Nije bila. Asistent traku preskače
     SAM (`.dalia-corner-btn`), pa je njegovo dno 62 px, a ne 16 px kako je rail
     pretpostavljao; ploča koja se slagala „jedan slot više" od baze slijetala
     mu je na glavu. Od 13.8. asistent stoji NA railu, pa svaka ploha iznad
     njega mora zbrojiti i `--dw-dock-nav` — komentar više ne daje dozvolu da se
     preskoči. Zato token, a ne
     brojka na mjestu upotrebe: mjeru drži ljuska (`.dw-bottom-nav`,
     shell_couple.html), ne ploha koja je čita. */
  --dw-dock-nav:    0px;
  /* Donji rub raila — sve plohe kreću odavde. */
  --dw-dock-base:   calc(env(safe-area-inset-bottom, 0px) + var(--dw-dock-inset));
}
@media (max-width: 768px) {
  :root {
    /* 16px = točno rub `.dalia-corner-btn` (dalia-portal.css) — desni rubovi
       ploha se poklapaju, ne razilaze za 2px kao dosad. */
    --dw-dock-side:   16px;
    --dw-dock-inset:  16px;
    --dw-dock-assist: 44px;  /* mobitel: .dalia-corner-btn (FAB je skriven) */
    /* 50px = `.dw-bottom-nav` height (paritet s gostinskom ljuskom, PR #996).
       Safe-area NIJE ovdje — traka je ima u svojoj visini, a `--dw-dock-base`
       je već dodaje; zbrojena dvaput dala bi prazan pojas na iPhoneu. */
    --dw-dock-nav:    50px;
  }
}

/* Ploha koja je preuzela ekran (fotografija u lightboxu, chat panel/oblačić)
   skloni glazbenu ploču. Ne `display:none` na <audio> roditelju radi zvuka —
   `visibility` skriva kontrolu, a reprodukcija teče dalje. */
/* Rasmus R3 §10 blocker #3 (`templates/couple/guests.html` openEditModal):
   `body.gd-card-open` added to the existing list below. At ≤768px
   `#edit-modal` is full-screen, so the disc used to sit over the card's
   bottom (Zahvala/Uredi podatke) since the guest card wasn't on this list. */
body.lb-open #dwVinyl,
body.cc-open #dwVinyl,
body.gc-open #dwVinyl,
body.gp-dalia-open #dwVinyl,
body.gd-card-open #dwVinyl,
/* Odabir više pjesama (/mladenci/pjesme): traka odabira uzima cijelu širinu
   donjeg ruba, pa gramofon nema svoj slot — izmjereno na 390 px, preklapao je
   traku 72×42 px, točno preko gumba „Premjesti u…". Isto pravilo kao gore:
   ploha koja je preuzela ekran gasi dock, zvuk ide dalje. */
body.sg-picking #dwVinyl {
  visibility: hidden;
  pointer-events: none;
}
/* Zaseban blok NAMJERNO: `:has()` u istoj listi selektora srušio bi cijelo
   pravilo u pregledniku koji ga ne zna. Couple chat panel nema tijelo-klasu
   (otvara se klasom na samom panelu), pa ga hvatamo ovako. */
body:has(.dalia-chat-panel.open) #dwVinyl {
  visibility: hidden;
  pointer-events: none;
}
/* Assistant (`.dalia-chat-btn` desktop / `.dalia-corner-btn` mobile) next to
   the disc — the audit named both ("the disc and the assistant sit OVER the
   content"). Scoped ONLY to `gd-card-open`: it's the one trigger that today
   has no assistant extinguisher at all (for lb-open/cc-open/gc-open/
   gp-dalia-open that's a separate, pre-existing finding — out of scope for
   this change). Same mechanism, new surface. */
body.gd-card-open .dalia-chat-btn,
body.gd-card-open .dalia-corner-btn {
  visibility: hidden;
  pointer-events: none;
}

/* ── Scrollbar (pseudo + html baza; kontejner-selektori ostaju po shellu) ── */
html { scrollbar-width: thin; scrollbar-color: var(--color-deep-mauve, #b56b8d) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d18ab0, #b56b8d); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #c87aa0, #a05a7d); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* ── Notif panel ── */
.notif-panel { position: fixed; top: 0; left: 0; width: 360px; max-width: calc(100vw - 24px); background: var(--dark-surface, #fff); border-radius: 12px; box-shadow: 0 18px 48px rgba(45,34,56,0.22), 0 4px 12px rgba(45,34,56,0.08); z-index: 2147483600; max-height: 70vh; overflow-y: auto; }
.notif-panel.hidden { display: none; }
.notif-panel-header { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: #1a1a2e; font-size: 13px; }
/* Danas/Jučer/Starije separatori (Obavijesti v2, postavke-merge 2026-07-25 —
   isti pravilo postoji i u shell_vendor.html inline, kandidat za buduci dedup). */
.notif-day-sep { padding: 12px 16px 4px; margin-top: 14px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--stone); }
.notif-day-sep--first { margin-top: 0; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid #f9fafb; cursor: pointer; transition: background .15s; }
.notif-item:hover { background: #f9fafb; }
.notif-item.notif-read { opacity: 0.55; }
.notif-title { font-weight: 600; font-size: 12px; color: #1a1a2e; margin-bottom: 3px; }
.notif-message { font-size: 11px; color: #6b7280; line-height: 1.4; }
.notif-time { font-size: 10px; color: #9ca3af; margin-top: 5px; }
.notif-urgent .notif-title { color: #dc2626; }
.notif-urgent { border-left: 3px solid #dc2626; }
.notif-warning { border-left: 3px solid #f59e0b; }
.notif-info { border-left: 3px solid #3b82f6; }

/* ── Profil / avatar meni (bez .couple-profile baze — layout se razlikuje) ── */
.couple-profile__trigger { padding: 0; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.couple-profile__trigger:hover { background: none; color: inherit; }
/* Trigger nosi i .notif-bell, ali SAMO kao stabilno sidro za notif panel (vidi
   openCoupleNotifs). Bez ovog resetiranja pokupi i bellov `padding:6px` +
   `border-radius:6px`: 40px gumb ostane s 28px sadržajnog prostora, avatar se
   stisne na 28×36 i čita se kao ovalan (Bruno 2026-07-26, mobilni topbar). */
.couple-profile__trigger.notif-bell { padding: 0; border-radius: 50%; }
/* flex-shrink:0 + aspect-ratio: avatar je krug i kad je mjesta manje nego što traži. */
.couple-profile__avatar { width: 36px; height: 36px; flex: 0 0 auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--ivory); display: block; }
.couple-profile__avatar--fallback { display: flex; align-items: center; justify-content: center; background: var(--ivory); color: var(--stone); }
.couple-profile__avatar--fallback svg { width: 20px; height: 20px; }
/* Slomljena fotografija → dwAvFail zamijeni <img> <span>-om s inicijalom i
   PRENESE klasu; span mora centrirati slovo (Vedran 2026-07-29). */
span.couple-profile__avatar { display: flex; align-items: center; justify-content: center; background: var(--ivory); color: var(--stone); font-family: var(--font-serif, 'Cardo', Georgia, serif); font-size: 15px; font-weight: 600; line-height: 1; }
.couple-profile__dot { position: absolute; top: 1px; right: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--lilac-400, #b692d4); border: 1.5px solid var(--paper, #fffaf6); z-index: 2; }
.couple-profile__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; padding: 6px; background: var(--paper, #fffaf6); border: 1px solid var(--ivory); border-radius: 14px; box-shadow: 0 18px 48px rgba(45,34,56,0.18), 0 4px 12px rgba(45,34,56,0.08); z-index: 1001; animation: coupleProfileIn .16s ease; }
.couple-profile__menu.hidden { display: none; }
@keyframes coupleProfileIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.couple-profile__item { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 11px 12px; border: none; background: none; font-family: inherit; font-size: 14px; color: var(--warm-black); text-align: left; text-decoration: none; cursor: pointer; border-radius: 9px; }
.couple-profile__item:hover { background: var(--ivory); }
/* `display:flex` iznad gazi UA pravilo `[hidden]{display:none}` — bez ovoga je
   'Vrati Daliju' stajala u meniju i kad Dalia NIJE sakrivena (Vedran 2026-07-29).
   Vrijedi za svaku buduću uslovnu stavku menija, ne samo za tu. */
.couple-profile__item[hidden] { display: none !important; }
.couple-profile__item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--stone); }
.couple-profile__item span { flex: 1; }
.couple-profile__count { flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--lilac-400, #b692d4); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.couple-profile__divider { height: 1px; background: var(--ivory); margin: 6px 4px; }

/* ── Cjeline izbornika (Vedran 29.8.2026.) ──────────────────────────────────
   „To su sve jako bitne stavke i moraju se brzo vidjeti, razumjeti i biti
   nadohvat ruke." Popis od osam ravnopravnih redaka to nije mogao — sve je bilo
   jednako naglašeno, dakle ništa. Sad tri razine: obavijesti (mijenjaju se same),
   skupine s nadnaslovom, i jedan gumb koji nosi najčešći izlaz. */
.couple-profile__group {
  padding: 10px 12px 3px; font-family: var(--font-sans, 'Manrope', sans-serif);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--stone);
}
.couple-profile__item--notif { font-weight: 600; }

/* Povratak u portal je JEDINI naglašen redak. Vedran: „veći naglasak želimo
   staviti na povratak na portal nego na odjavu iz app — realno u današnje
   vrijeme nitko se ne odjavljuje više s aplikacija." Odjava zato pada na tihi
   tekstualni redak: i dalje je tu, ali više ne izgleda kao glavna radnja. */
.couple-profile__portal {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; box-sizing: border-box;
  margin: 10px 0 4px; padding: 12px 14px;
  border-radius: 11px; text-decoration: none;
  background: var(--color-deep-mauve, #b56b8d); color: #fff;
  font-family: var(--font-sans, 'Manrope', sans-serif); font-size: 14px; font-weight: 600;
}
.couple-profile__portal:hover { background: #a05a7d; }
.couple-profile__portal svg { width: 17px; height: 17px; flex-shrink: 0; color: currentColor; }
.couple-profile__logout {
  display: block; padding: 8px 12px 6px; text-align: center;
  font-family: var(--font-sans, 'Manrope', sans-serif); font-size: 12.5px;
  color: var(--stone); text-decoration: none;
}
.couple-profile__logout:hover { color: var(--danger, #c0566f); }
body.dark-mode .couple-profile__group { color: #8A857C; }
body.dark-mode .couple-profile__logout { color: #8A857C; }
.couple-profile__item--danger { color: var(--danger, #c0566f); }
.couple-profile__item--danger svg { color: var(--danger, #c0566f); }
@media (prefers-reduced-motion: reduce) { .couple-profile__menu { animation: none; } }

/* ── Tamni nacin — dijeljeni chrome (zvonce + kartice ostaju po shellu) ── */
body.dark-mode .notif-panel { background: #252220; }
body.dark-mode .notif-panel-header { border-bottom-color: #3A3530; color: #D4C4B0; }
body.dark-mode .notif-item { border-bottom-color: #3A3530; }
body.dark-mode .notif-item:hover { background: #2A2520; }
body.dark-mode .notif-title { color: #D4C4B0; }
body.dark-mode .notif-message { color: #9B9188; }
body.dark-mode .couple-profile__menu { background: #252220; border-color: #3A3530; }
body.dark-mode .couple-profile__item { color: #D4C4B0; }
body.dark-mode .couple-profile__item:hover { background: #3A3530; }
body.dark-mode .couple-profile__divider { background: #3A3530; }
body.dark-mode .couple-profile__avatar--fallback { background: #3A3530; color: #9B9188; }

/* ── DALIA CHAT LAUNCHER — jedan izgled na oba portala (Vedran 2026-07-29) ────
   Prije: gost je nosio krug s inicijalima para (na demo vjenčanju ispisano „AI"),
   couple sparkle-zvjezdicu u paper krugu, desktop golu okruglu Daliju — tri
   različite ikone za istu radnju. Sad: OBLAČIĆ (krug s uglatim donjim-desnim
   kutom, ista geometrija kao .cc-panel) s okruglim Dalia znakom unutra —
   „ovo je chat, a u njemu je Dalia".

   Pozicije NE ulaze ovamo (rail je po portalu: guest-docks.css za gosta,
   dalia-portal.css za couple). Selektor je `button.dw-chat-fab` (0,1,1)
   namjerno: pobjeđuje jedno-klasne rule komponenti (.gc-launcher,
   .dalia-corner-btn, .dalia-chat-btn) bez !important i bez ovisnosti o
   redoslijedu <link>-ova i inline <style> blokova. */
button.dw-chat-fab {
  /* Padding je asimetričan: znak sjedne gore-lijevo, pa oblačić ostane samo
     kao tanki rub i luk u uglatom donjem-desnom kutu.

     Vedran 9.8.2026.: „još bi povećao naš logo, a smanjio chat ikonicu — da
     postanu jedno, samo da viri taj donji dio." Znak je zato narastao na 94 %,
     a oblačić se povukao na 1 px gore-lijevo; ostaje mu 7 px dolje-desno, i to
     je jedini dio koji viri. */
  padding: 1px 7px 7px 1px;
  /* NE postavljati `display` ovdje: svaka od tri instance sama gasi/pali sebe po
     breakpointu (.dalia-chat-btn desktop-only, .gc-launcher/.dalia-corner-btn
     mobile-only) i dijeljeni `display` bi im pregazio media pravila. */
  align-items: center; justify-content: center;
  border-radius: 50% 50% 8px 50%;
  /* Vedran 9.8.2026.: „neka sadržava naš pravi logo… ovaj svijet makni."

     Do danas je unutra stajala FOTOGRAFIJA dalije
     (`higgsfield/dalia-chat-icon-128.webp`) na bijelom disku — dva predmeta i
     nijedan od njih nije znak marke. Sad je unutra pravi znak
     (`constants.BRAND_MARKS`, isti koji nosi zaglavlje svakog portala), a
     bijeli disk je izašao.

     Zbog toga se morala okrenuti i podloga: znak je lilac (#9f7c9e) sa zlatnim
     prstenima, i na mauve oblačiću bi utonuo. Oblačić je zato PAPIR — ista
     podloga na kojoj znak stoji u zaglavlju — a mauve ostaje kao rub i kao
     uglati kut dolje-desno, „taj dio dolje da podsjeća na naš logo".
     Odvajanje od stranice nosi rub + sjena, ne ispuna. */
  background: var(--paper, #fffaf6);
  border: 1.5px solid var(--color-deep-mauve, #b56b8d);
  box-shadow: 0 12px 28px -12px rgba(90, 52, 74, 0.55);
  color: var(--color-deep-mauve, #b56b8d);
  overflow: visible;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}
button.dw-chat-fab:active { transform: scale(0.94); }
body.dark-mode button.dw-chat-fab {
  /* U tamnom načinu papir ostaje papir — znak je crtan za svijetlu podlogu i
     na tamnoj bi mu zlatni prsteni nestali. Mijenja se samo sjena. */
  background: var(--paper, #fffaf6);
  border-color: var(--color-deep-mauve, #b56b8d);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.65);
}
/* Okrugli Dalia znak unutar oblačića — FUZIJA (Vedran 2026-07-29): znak nosi
   gotovo cijelu plohu, a oblačić od sebe ostavlja samo tanki rub i LUK u
   donjem-desnom kutu (repić). Prije je znak bio 62 % pa je mauve prstena bilo
   više od samog znaka — dva odvojena predmeta, ne jedan. */
.dw-chatmark {
  display: block; width: 94%; height: 94%;
  border-radius: 50%; overflow: visible; flex-shrink: 0;
  /* Bez ispune i bez sjene: znak sada stoji IZRAVNO na papiru oblačića, kao u
     zaglavlju. Disk je bio potreban dok je unutra bila fotografija. */
  background: none;
  /* Znak ostaje malo gore-lijevo od središta, pa se uglati kut dolje-desno
     čita kao repić — to je dio koji podsjeća na marku. */
  margin: 0 auto auto 0;
}
/* `contain`, ne `cover`: znak je crtež s vlastitim marginama i `cover` bi mu
   odrezao zlatne prstene, po kojima se marka prepoznaje. */
.dw-chatmark > img, .dw-chatmark > svg { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Fallback kad slika ne dođe (isti oblik, znak brenda umjesto fotografije). */
.dw-chatmark--fallback {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #b56b8d, #a05a7d); color: #fff;
  font-family: var(--font-serif, 'Cardo', Georgia, serif); font-size: 15px; line-height: 1;
}

/* ── Dugi pritisak → „Sakrij Daliju" (Vedran 2026-07-29) ─────────────────────
   Asistent je nudge, ne inventar: gost/par koji ga ne želi mora ga moći
   skloniti bez ulaska u postavke. Stanje je lokalno (localStorage), po
   pregledniku — ne dira račun. Vraća se stavkom „Vrati Daliju" u profil meniju,
   koja postoji samo dok je sakriven. */
body.dw-fab-off button.dw-chat-fab { display: none !important; }
.dw-fab-sheet {
  position: fixed; z-index: 2147483000;
  min-width: 208px; max-width: min(300px, calc(100vw - 32px));
  padding: 14px 16px 12px;
  background: var(--paper, #fffaf6);
  border: 1px solid var(--ivory, #ede8df);
  border-radius: 16px 16px 6px 16px;
  box-shadow: 0 22px 54px -26px rgba(45, 34, 56, 0.46);
  font-family: var(--font-sans, 'Manrope', sans-serif);
  animation: dwFabSheetIn .16s cubic-bezier(.22, 1, .36, 1);
}
@keyframes dwFabSheetIn { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } }
.dw-fab-sheet__t { font-family: var(--font-serif, 'Cardo', Georgia, serif); font-size: 15px; color: var(--warm-black, #3f3138); margin: 0 0 3px; }
.dw-fab-sheet__s { font-size: 12px; color: var(--stone, #8c7f6e); margin: 0 0 12px; line-height: 1.45; }
.dw-fab-sheet__row { display: flex; gap: 8px; }
.dw-fab-sheet button {
  flex: 1; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
}
.dw-fab-sheet__no { border: 1px solid rgba(140, 130, 121, 0.3); background: transparent; color: var(--stone, #8c7f6e); }
.dw-fab-sheet__yes { border: 1px solid #a05a7d; background: #a05a7d; color: #fff; }
body.dark-mode .dw-fab-sheet { background: #252220; border-color: #3A3530; }
body.dark-mode .dw-fab-sheet__t { color: #E8DED0; }
@media (prefers-reduced-motion: reduce) { .dw-fab-sheet { animation: none; } }