/* Izvuceno iz templates/layouts/shell_couple.html (scripts/build/izvuci_inline_css.py).
   Uredjuj OVDJE, ne u predlosku — predlozak ga samo linka. *//* ══════════════════════════════════════════════════════════════════
   DALIA AI CHAT — bilo je zaseban <style> usred <body> ljuske, pa je na
   svaki zahtjev putovalo 11,4 kB nekeširanog CSS-a. Spojeno ovamo
   10.9.2026.; provjereno kroz CSSOM da nijedan drugi list (ni raniji ni
   kasniji u dokumentu) ne definira nijedan od 53 selektora ovog bloka,
   pa premještanje ne mijenja nijedan ishod kaskade.
   ══════════════════════════════════════════════════════════════════ */
/* Dalia AI Chat Button */
/* Oblik/pozadina/znak = dijeljeni `button.dw-chat-fab` (portal-chrome.css,
   Vedran 2026-07-29) — isti launcher kao gostu; ovdje samo pozicija/veličina. */
.dalia-chat-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  border: none;
  width: 64px;
  height: 64px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  z-index: var(--z-dock-vinyl);   /* iznad chat composera (10001) da AI ikona ne padne iza chat boxa (Vedran 2026-06-23) */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Sprint 2026-05-07: hide Dalia FAB on chat page — covered Send button.
   Couple is already in chat, can use AI summary inside thread. */
body[data-route="/mladenci/poruke"] .dalia-chat-btn { display: none; }
/* Bruno 2026-07-04: FAB (z-index 1000, kasnije u DOM-u) prekrivao je lightbox
   ⋯ izbornik (#cg-lb je isto z-index 1000, donji-desni kut). Dok je fotka
   otvorena, Dalia se miče — lightbox.js postavlja body.lb-open. */
body.lb-open .dalia-chat-btn,
body.lb-open .dalia-corner-btn { display: none !important; }
/* Bundle E (2026-05-18): hide FAB na <=768px — Dalia chat ulazi u
   "Više" drawer kao 6. stavka, ne preklapa Bundle E bottom-nav desno. */
@media (max-width: 768px) { .dalia-chat-btn { display: none !important; } }
.dalia-chat-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 32px -12px rgba(90,52,74,0.5);
}
.dalia-chat-btn:active {
  transform: scale(0.95);
}
.dalia-badge {
  position: absolute;
  /* S8 (2026-07-17): badge mora ostati UNUTAR kruga — FAB ima overflow:hidden
     + border-radius:50% pa je stari -4px offset rezao badge (vidio se samo
     unutarnji dio). 7px + 20px badge = najdalja točka 31.2px < radijus 32px. */
  top: 7px;
  right: 7px;
  background: var(--cpl-tw-danger);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border: 2px solid white;
}

/* Chat Panel — Sprint 5 (Unified hub) compact floating dock:
   Inspiracija: Slack thread popup + Intercom Messenger expanded view.
   Bottom-right bubble (ne preko cijelog ekrana), sidebar + main unutar,
   scale + fade animation. */
.dalia-chat-panel {
  position: fixed;
  bottom: 96px;          /* iznad FAB-a (FAB je 24px+64px = 88px, padding 8px) */
  right: 24px;
  width: 880px;          /* dovoljno za sidebar 240 + main 640 */
  max-width: calc(100vw - 48px);
  height: 700px;
  max-height: calc(100vh - 120px);  /* ostavi vrh + FAB area */
  background: var(--dark-surface, white);
  box-shadow: 0 12px 40px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.08);
  border-radius: 16px;
  z-index: var(--z-dalia-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* default closed — scaled down + transparent */
  transform: scale(0.92) translateY(20px);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.18s ease;
}
.dalia-chat-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
/* Subtle close X — discoverable but not loud. Iznad iframe sadržaja
   (iframe loadira embed shell, ne može sam dohvatiti toggleDaliaChat). */
/* Bruno 2026-05-29: ✕ manje vidljiv (bio preupadljiv) — bez podloge/sjene,
   poluprozirno; pojača se na hover. */
.dalia-panel-close {
  position: absolute;
  top: 9px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--cpl-assist-mute);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.55;
  z-index: var(--z-sticky);
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.dalia-panel-close:hover {
  background: rgba(0,0,0,0.06);
  color: var(--dark-ink-strong, var(--cpl-tw-ink-mute));
  opacity: 1;
}
/* Tap-target hit-box (per Rasmus): glyph + hover ostaju 28px (Bruno 2026-05-29
   suptilan close), hit-box raste nevidljivo na 44px. ::before hvata palac. */
.dalia-panel-close::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}
/* Proširi → puni /poruke (Bruno 2026-05-29 #11). */
.dalia-panel-expand {
  position: absolute;
  top: 9px; right: 42px;
  height: 28px; padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(160,90,125,0.3);
  background: var(--dark-sunk, rgba(255,255,255,0.7));
  color: var(--cpl-mauve-aa);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  z-index: var(--z-sticky); opacity: 0.85;
  transition: background 0.15s, opacity 0.15s;
}
.dalia-panel-expand:hover { background: var(--dark-surface, var(--cpl-on-fill-ink)); opacity: 1; }
/* Tap-target hit-box (per Rasmus): pill je dovoljno širok, samo nizak —
   podigni hit-box na 44px po Y, vizualni pill ostaje 28px. */
.dalia-panel-expand::before {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  width: 100%; height: 44px;
}
.dalia-panel-close:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}
/* Mobile: ladica koja NE pojede stranicu (R2 2026-07-29).
   Do sada je ovdje stajao stari full-screen sheet — 100vw × 100dvh, bez
   zaobljenja, bez ijednog piksela stranice iza sebe. WP6 je asistenta sveo na
   popup, ali je ovaj media query ostao i vraćao bi ga u cijeli ekran čim se
   panel otvori na mobitelu. Odmak od vrha (24px) je jedina obrana koja se ne
   može zaobići: korisnik uvijek vidi da stranica postoji ispod, pa zna da se
   asistent zatvara, a ne da je "otišao u drugu aplikaciju". */
@media (max-width: 768px) {
  .dalia-chat-panel {
    inset: 24px 0 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .dalia-chat-panel.open {
    transform: translateY(0);
  }
  /* Rasmus 60% rez: "Otvori u punom prikazu" dok si već u full-screen sheetu
     ne služi nijednu namjeru — makni s mobile-a, ukloni i tap-overlap pored
     close-a. Expand ostaje na desktop panelu gdje route-expand ima smisla. */
  .dalia-panel-expand { display: none; }
}
/* Backdrop — semi-transparent overlay iza panela, klik = close.
   Pojavi se samo kad panel.open. Subtle (rgba .04) da ne prekriva stranicu
   ali da hvata outside click. */
.dalia-chat-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.04);
  z-index: var(--z-dalia-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.dalia-chat-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
/* FAB ostaje vidljiv kad je panel otvoren — klik na nju toggla close,
   logično jer korisnik može instinktivno opet kliknuti na "chat ikonu"
   da je sakrije. Lagani vizualni signal "active" s ring oko nje. */
.dalia-chat-btn.is-panel-open {
  box-shadow: 0 4px 16px rgba(160,90,125,0.4),
              0 0 0 4px rgba(160,90,125,0.18);
}
.dalia-chat-btn.is-panel-open::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  pointer-events: none;
}
/* Iframe wrapper unutar panel-a — full-area, no border */
.dalia-chat-iframe-wrap {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--paper);
  position: relative;
}
.dalia-chat-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.dalia-chat-iframe-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--cpl-assist-hint);
  background: var(--paper);
  z-index: var(--z-content);
}
.dalia-chat-iframe-wrap.loaded .dalia-chat-iframe-loading {
  display: none;
}
/* Old inline Dalia DOM — hidden default, kept za backward-compat ako neki
   skill/code ga referencira. Sprint 5 ne koristi inline UI. */
.dalia-legacy-inline { display: none !important; }
.dalia-chat-header {
  background: linear-gradient(135deg, var(--color-deep-mauve), var(--cpl-assist-gold));
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dalia-header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dalia-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--dark-surface, white);
  flex-shrink: 0;
}
.dalia-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dalia-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: var(--dark-surface, var(--cpl-tw-surface));
}
.dalia-message {
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
}
.dalia-message.user {
  flex-direction: row-reverse;
}
.dalia-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--cpl-tw-line);
}
.dalia-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dalia-message.assistant .dalia-avatar {
  background: linear-gradient(135deg, var(--color-deep-mauve), var(--cpl-assist-gold));
  color: white;
}
.dalia-message.user .dalia-avatar {
  background: var(--cpl-tw-line);
  color: var(--cpl-tw-ink-soft);
}
.dalia-bubble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  line-height: 1.5;
  font-size: 14px;
}
.dalia-message.assistant .dalia-bubble {
  background: var(--dark-surface, white);
  color: var(--dark-ink-strong, var(--cpl-tw-ink));
  border: 1px solid var(--dark-line, var(--cpl-tw-line));
}
.dalia-message.user .dalia-bubble {
  background: linear-gradient(135deg, var(--color-deep-mauve), var(--cpl-assist-gold));
  color: white;
}
.dalia-bubble a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}
.dalia-bubble.warning {
  background: var(--cpl-tw-warn-bg) !important;
  border-color: var(--cpl-tw-warn-line) !important;
  color: var(--cpl-tw-warn-ink) !important;
}
.dalia-typing {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--dark-surface, white);
  border-radius: 16px;
  width: fit-content;
}
.dalia-typing.active {
  display: flex;
}
.dalia-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-deep-mauve);
  animation: typing 1.4s infinite;
}
.dalia-typing span:nth-child(2) { animation-delay: 0.2s; }
.dalia-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-10px); opacity: 1; }
}
.dalia-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--dark-line, var(--cpl-tw-line));
  background: var(--dark-surface, white);
}
.dalia-input-wrapper {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.dalia-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--dark-line, var(--cpl-tw-line));
  border-radius: 24px;
  font-size: 14px;
  resize: none;
  font-family: inherit;
  max-height: 120px;
  transition: border-color 0.2s;
}
.dalia-input:focus {
  outline: none;
  border-color: var(--color-deep-mauve);
}
.dalia-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-deep-mauve), var(--cpl-assist-gold));
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.2s;
}
.dalia-send-btn:hover {
  transform: scale(1.1);
}
.dalia-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
