@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

#gadaj-z-ai-root {
  position: fixed;
  /* Faza H+: offset sterowany CSS varami z widget.js (FAB_OFFSET_X/Y) */
  bottom: var(--gzai-fab-offset-y, 20px);
  right: var(--gzai-fab-offset-x, 20px);
  z-index: 2147483000;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #0D1B2E;
  --gzai-accent: #FF6B35;
  --gzai-btn-size: 60px;
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Lewa strona — używa left zamiast right */
#gadaj-z-ai-root.gzai-pos-BL {
  right: auto;
  left: var(--gzai-fab-offset-x, 20px);
}
/* FAB delay — pending state (przed odsłonięciem) ukrywa root */
#gadaj-z-ai-root.gzai-fab-pending {
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
}
#gadaj-z-ai-root.gzai-fab-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#gadaj-z-ai-root.gzai-pos-BL {
  right: auto;
  left: 20px;
}

#gadaj-z-ai-root *,
#gadaj-z-ai-root *::before,
#gadaj-z-ai-root *::after {
  box-sizing: border-box;
  font-family: inherit;
}

/* Bubble button */
#gadaj-z-ai-root #gzai-btn {
  width: var(--gzai-btn-size, 60px);
  height: var(--gzai-btn-size, 60px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gzai-accent, #FF6B35) 0%, color-mix(in srgb, var(--gzai-accent, #FF6B35) 70%, white) 100%);
  /* Kolor ikony SVG (currentColor) — domyślnie biały, override per-site
     przez appearanceConfig.fabIconColor (np. Lalak: czarna ikona na bursztynowym FAB). */
  color: var(--gzai-fab-icon-color, #fff);
  border: none;
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.35), 0 2px 6px rgba(13, 27, 46, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  overflow: hidden;
}
#gadaj-z-ai-root #gzai-btn:hover { transform: scale(1.05); box-shadow: 0 10px 28px rgba(255, 107, 53, 0.45); }
#gadaj-z-ai-root #gzai-btn:active { transform: scale(0.97); }
#gadaj-z-ai-root.gzai-open #gzai-btn { transform: scale(0.9); opacity: 0.85; }

#gadaj-z-ai-root #gzai-btn img.gzai-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Idle bounce */
#gadaj-z-ai-root #gzai-btn.gzai-bounce {
  animation: gzai-idle-bounce 0.9s ease;
}
@keyframes gzai-idle-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
  60% { transform: translateY(0); }
}

/* Panel — hidden by default, shown via .gzai-open on root */
#gadaj-z-ai-root #gzai-panel {
  --gzai-font-scale: 1;
  --gzai-size-scale: 1;
  position: absolute;
  bottom: calc(var(--gzai-btn-size, 60px) + 16px);
  right: 0;
  width: calc(var(--emedia-chat-width, 580px) * var(--gzai-size-scale));
  max-width: calc(100vw - 32px);
  transition: width 280ms cubic-bezier(0.16, 1, 0.3, 1), height 280ms cubic-bezier(0.16, 1, 0.3, 1);
  height: calc(760px * var(--gzai-size-scale));
  max-height: calc(100vh - 100px);
  background: #FFFFFF;
  border-radius: 7px;
  box-shadow: 0 20px 60px rgba(13, 27, 46, 0.25), 0 4px 12px rgba(13, 27, 46, 0.1);
  /* Default state: ukryte, ale BEZ display:none — zostawiamy w DOM żeby
     transition close mógł się odpalić (close animation). Visibility +
     pointer-events handluje "zamknięty" stan żeby nie było interakcji. */
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(0.98);
  transform-origin: bottom right;
  /* Subtelne 500ms cubic-bezier — delikatne wejście/wyjście (was 220ms ease).
     Visibility ma delay równe transition żeby element został visible aż animacja zwijania się skończy. */
  transition:
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 500ms;
  display: flex;
}
#gadaj-z-ai-root.gzai-pos-BL #gzai-panel {
  right: auto;
  left: 0;
  transform-origin: bottom left;
}
#gadaj-z-ai-root.gzai-open #gzai-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  /* Otwieranie: visibility natychmiast (delay 0s), żeby element był widoczny
     podczas animacji opacity/transform. */
  transition:
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

/* Entry animations — keyframes (alternatywa do default transition).
   Wszystkie wydłużone do 460-560ms cubic-bezier dla subtelnego, miękkiego efektu. */
#gadaj-z-ai-root.gzai-entry-slide-up.gzai-open #gzai-panel {
  animation: gzai-slide-in 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes gzai-slide-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#gadaj-z-ai-root.gzai-entry-scale.gzai-open #gzai-panel {
  animation: gzai-entry-scale 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes gzai-entry-scale {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}
#gadaj-z-ai-root.gzai-entry-fade.gzai-open #gzai-panel {
  animation: gzai-entry-fade 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes gzai-entry-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
#gadaj-z-ai-root.gzai-entry-bounce.gzai-open #gzai-panel {
  animation: gzai-entry-bounce 540ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
@keyframes gzai-entry-bounce {
  0% { opacity: 0; transform: translateY(24px) scale(0.92); }
  65% { opacity: 1; transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
#gadaj-z-ai-root #gzai-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  /* Konfigurowalny przez appearanceConfig.headerBgColor (CSS var ustawiany w widget.js).
     Default: navy gradient emedia24. Lalak/customowe: solid color np. '#0a0a0a'. */
  background: var(--gzai-header-bg, linear-gradient(135deg, #0D1B2E 0%, #1A2A44 100%));
  color: #fff;
  flex-shrink: 0;
}
#gadaj-z-ai-root #gzai-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* Konfigurowalny przez appearanceConfig.avatarBgColor — solid color override.
     Default: accent → pink gradient (emedia24 brand). */
  background: var(--gzai-avatar-bg, linear-gradient(135deg, var(--gzai-accent, #FF6B35) 0%, #E5207B 100%));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(255, 107, 53, 0.4);
  overflow: hidden;
}
#gadaj-z-ai-root #gzai-avatar img.gzai-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Litera "A" w avatarze (gdy useInitialAvatar=true) — duża, gruba, kolor configurable.
   Lalak: czarna litera na bursztynowym tle (--gzai-avatar-bg = #F5A623). */
#gadaj-z-ai-root #gzai-avatar .gzai-avatar-letter {
  font: 700 22px/1 Outfit, system-ui, sans-serif;
  color: var(--gzai-avatar-letter-color, #000);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  letter-spacing: -0.5px;
}
#gadaj-z-ai-root .gzai-msg-avatar .gzai-avatar-letter {
  font: 700 14px/1 Outfit, system-ui, sans-serif;
  color: var(--gzai-avatar-letter-color, #000);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  letter-spacing: -0.3px;
}
#gadaj-z-ai-root #gzai-title-wrap { flex: 1; min-width: 0; }
#gadaj-z-ai-root #gzai-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
#gadaj-z-ai-root #gzai-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: #B8C4D6;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#gadaj-z-ai-root .gzai-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3DCC7E;
  box-shadow: 0 0 0 2px rgba(61, 204, 126, 0.25);
  animation: gzai-pulse 2s ease-in-out infinite;
}
@keyframes gzai-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(61, 204, 126, 0.25); }
  50% { box-shadow: 0 0 0 4px rgba(61, 204, 126, 0.1); }
}
#gadaj-z-ai-root #gzai-close {
  background: transparent;
  border: none;
  color: #8A9BB0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
#gadaj-z-ai-root #gzai-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* Header zoom buttons (font + size) — pill-shaped buttons with a label icon
   on top and a "100%" / "125%" / "150%" pct readout below. data-step="1|2"
   highlights the active scale. */
#gadaj-z-ai-root .gzai-header-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  padding: 4px 10px;
  min-height: 38px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: 6px;
  margin-right: 4px;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#gadaj-z-ai-root .gzai-header-btn-label {
  font: 700 14px/1 Outfit, system-ui, sans-serif;
  letter-spacing: 0;
}
#gadaj-z-ai-root .gzai-header-btn-label sup {
  font-size: 9px;
  margin-left: 1px;
}
#gadaj-z-ai-root .gzai-header-btn-pct {
  font: 600 9px/1 Outfit, system-ui, sans-serif;
  margin-top: 2px;
  opacity: 0.8;
  letter-spacing: 0.02em;
}
#gadaj-z-ai-root .gzai-header-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}
/* Icon-only header button (np. "Nowa rozmowa" ↻) — bez % licznika */
#gadaj-z-ai-root .gzai-header-btn-icon {
  padding: 4px 8px;
  min-width: 38px;
}
#gadaj-z-ai-root .gzai-header-btn-icon .gzai-header-btn-label {
  font-size: 18px;
  line-height: 1;
}
/* Resume hint — pojawia się gdy widget przywraca poprzednią rozmowę */
#gadaj-z-ai-root .gzai-resume-hint {
  margin: 8px 12px 4px;
  padding: 8px 10px;
  background: rgba(255, 107, 53, 0.06);
  border: 1px solid rgba(255, 107, 53, 0.18);
  border-radius: 5px;
  font: 500 11px/1.4 Outfit, system-ui, sans-serif;
  color: #8A9BB0;
  text-align: center;
  animation: gzai-resume-fade 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes gzai-resume-fade {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
#gadaj-z-ai-root .gzai-header-btn[data-step="1"] {
  color: #fff;
  background: rgba(255, 107, 53, 0.4);
  border-color: var(--gzai-accent, #FF6B35);
}
#gadaj-z-ai-root .gzai-header-btn[data-step="2"] {
  color: #fff;
  background: var(--gzai-accent, #FF6B35);
  border-color: var(--gzai-accent, #FF6B35);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.25);
}
#gadaj-z-ai-root .gzai-header-btn-bump {
  animation: gzai-header-btn-bump 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes gzai-header-btn-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Persistent disclaimer bar - art. 71 KC info, zawsze widoczny gdy chat
   otwarty (NIE tylko na splashu). Pod headerem, drobny szary tekst. */
#gadaj-z-ai-root #gzai-disclaimer-bar {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: #F5F7FA;
  border-bottom: 1px solid #E5E9EF;
  font: 400 calc(10px * var(--gzai-font-scale, 1))/1.4 Outfit, system-ui, sans-serif;
  color: #6B7280;
  text-align: center;
  letter-spacing: 0.01em;
}

/* Messages area */
#gadaj-z-ai-root #gzai-messages {
  flex: 1 1 auto;
  min-height: 0;  /* CRITICAL — bez tego flex item nie może się skurczyć i overflow nie działa */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 14px;
  background-color: #F5F7FA;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='240' viewBox='0 0 360 240'><g fill='none' stroke='%23D6DCE5' stroke-width='1.2' stroke-linecap='round' opacity='0.55'><path d='M-20 40 Q 40 10 90 38 T 200 32 T 320 48 T 420 30'/><path d='M-20 95 Q 55 72 110 98 T 230 90 T 340 108 T 440 90'/><path d='M-20 150 Q 48 128 100 152 T 220 144 T 330 162 T 430 146'/><path d='M-20 205 Q 60 182 120 208 T 240 200 T 350 218 T 450 202'/></g><g fill='none' stroke='%23C2CAD5' stroke-width='0.8' stroke-linecap='round' opacity='0.4'><path d='M-10 65 Q 65 50 130 72 T 260 62 T 380 78'/><path d='M-10 178 Q 70 160 140 182 T 270 172 T 390 188'/></g></svg>");
  background-repeat: repeat;
  background-size: 360px 240px;
  display: flex;
  flex-direction: column;
  /* Bez justify-content: flex-end — to blokowało scroll-up.
     Wiadomości flow od góry, scroll-to-bottom robi JS przy każdej nowej wiadomości. */
  gap: 8px;
}
/* Spacer-trick: pierwszy child dostaje margin-top: auto żeby gdy mało wiadomości,
   były pchnięte do dołu (jak chat). Gdy dużo — scroll od góry. */
#gadaj-z-ai-root #gzai-messages > *:first-child {
  margin-top: auto;
}
#gadaj-z-ai-root .gzai-msg {
  display: flex;
  max-width: 85%;
  animation: gzai-msg-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes gzai-msg-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
#gadaj-z-ai-root .gzai-assistant .gzai-bubble { animation: gzai-bubble-in 800ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 120ms; }
@keyframes gzai-bubble-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Per-message bot persona: avatar + name above each assistant bubble */
#gadaj-z-ai-root .gzai-assistant .gzai-msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding-left: 2px;
  animation: gzai-meta-in 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes gzai-meta-in {
  0%   { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}
#gadaj-z-ai-root .gzai-assistant .gzai-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* Używamy tego samego override'a co header avatar — spójny kolor obu kółek. */
  background: var(--gzai-avatar-bg, linear-gradient(135deg, var(--gzai-accent, #FF6B35) 0%, #E5207B 100%));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(13, 27, 46, 0.15);
}
#gadaj-z-ai-root .gzai-assistant .gzai-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#gadaj-z-ai-root .gzai-assistant .gzai-msg-avatar svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}
#gadaj-z-ai-root .gzai-assistant .gzai-msg-namewrap {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
#gadaj-z-ai-root .gzai-assistant .gzai-msg-name {
  font-size: calc(12px * var(--gzai-font-scale, 1));
  font-weight: 600;
  color: #4A5568;
  letter-spacing: 0.01em;
}
#gadaj-z-ai-root .gzai-assistant .gzai-msg-subtitle {
  font-size: calc(10px * var(--gzai-font-scale, 1));
  font-weight: 400;
  color: #8A9BB0;
  letter-spacing: 0.01em;
  margin-top: 1px;
}

/* Suggested-questions heading on welcome screen — bold, centered, fade-in. */
#gadaj-z-ai-root .gzai-suggested-heading {
  text-align: center;
  font: 600 calc(15px * var(--gzai-font-scale, 1))/1.4 Outfit, system-ui, sans-serif;
  color: #4A5568;
  margin: 6px 0 4px 0;
  letter-spacing: 0.01em;
  animation: gzai-suggested-heading-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes gzai-suggested-heading-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Streaming caret — blinking cursor at end of bubble while text is being typed */
#gadaj-z-ai-root .gzai-bubble.gzai-streaming::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  vertical-align: text-bottom;
  margin-left: 3px;
  background: var(--gzai-accent, #FF6B35);
  animation: gzai-caret-blink 1s steps(2) infinite;
  border-radius: 1px;
}
@keyframes gzai-caret-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
#gadaj-z-ai-root .gzai-user { align-self: flex-end; justify-content: flex-end; }
#gadaj-z-ai-root .gzai-assistant { align-self: stretch; justify-content: flex-start; flex-direction: column; align-items: stretch; max-width: 100%; }
#gadaj-z-ai-root .gzai-assistant .gzai-bubble { max-width: 85%; }
#gadaj-z-ai-root .gzai-assistant .emedia-chat-cards { width: 100%; margin-top: 10px; }
#gadaj-z-ai-root .gzai-bubble {
  padding: 9px 13px;
  border-radius: 7px;
  font-size: calc(14px * var(--gzai-font-scale, 1));
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: 0 1px 2px rgba(13, 27, 46, 0.06);
}
#gadaj-z-ai-root .gzai-user .gzai-bubble {
  background: linear-gradient(135deg, var(--gzai-accent, #FF6B35) 0%, color-mix(in srgb, var(--gzai-accent, #FF6B35) 70%, white) 100%);
  /* Kolor tekstu w bubble user — domyślnie biały, override przez --gzai-user-text-color
     (Lalak: czarny tekst na bursztynowym tle, jak buttony „Skontaktuj się"). */
  color: var(--gzai-user-text-color, #fff);
  border-bottom-right-radius: 2px;
}
#gadaj-z-ai-root .gzai-assistant .gzai-bubble {
  background: #fff;
  color: #0D1B2E;
  border: 1px solid #E5E9EF;
  border-bottom-left-radius: 2px;
}

/* Listy markdown w bubble — bez nadmiarowego paddingu który wycieka za krawędź. */
#gadaj-z-ai-root .gzai-bubble ul,
#gadaj-z-ai-root .gzai-bubble ol {
  margin: 6px 0;
  padding-left: 18px;
  list-style-position: outside;
  overflow-wrap: break-word;
  word-break: break-word;
}
#gadaj-z-ai-root .gzai-bubble li {
  margin: 2px 0;
  padding-left: 2px;
  line-height: 1.5;
}
#gadaj-z-ai-root .gzai-bubble li strong {
  font-weight: 600;
}
#gadaj-z-ai-root .gzai-bubble p {
  margin: 0 0 8px 0;
}
#gadaj-z-ai-root .gzai-bubble p:last-child {
  margin-bottom: 0;
}

/* Typing indicator */
#gadaj-z-ai-root .gzai-bubble.gzai-typing {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
}
#gadaj-z-ai-root .gzai-bubble.gzai-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8A9BB0;
  animation: gzai-bounce 1.2s infinite ease-in-out;
}
#gadaj-z-ai-root .gzai-bubble.gzai-typing span:nth-child(2) { animation-delay: 0.15s; }
#gadaj-z-ai-root .gzai-bubble.gzai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes gzai-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Consent overlay (RODO 'overlay' mode) — full-panel modal that fades to
   welcome on accept. Sits above messages but below header so user can still
   close the panel via header X button. */
#gadaj-z-ai-root #gzai-consent-overlay {
  position: absolute;
  top: 64px;  /* below header */
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10;
  animation: gzai-consent-in 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes gzai-consent-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
#gadaj-z-ai-root #gzai-consent-overlay.gzai-consent-overlay-leaving {
  animation: gzai-consent-out 320ms cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes gzai-consent-out {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}
#gadaj-z-ai-root .gzai-consent-card {
  max-width: 320px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
#gadaj-z-ai-root .gzai-consent-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gzai-accent, #FF6B35) 0%, #E5207B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(229, 32, 123, 0.18);
}
#gadaj-z-ai-root .gzai-consent-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#gadaj-z-ai-root .gzai-consent-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
}
#gadaj-z-ai-root .gzai-consent-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0D1B2E;
  letter-spacing: -0.01em;
}
#gadaj-z-ai-root .gzai-consent-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #4A5568;
}
#gadaj-z-ai-root .gzai-consent-policy {
  font-size: 12px;
  color: var(--gzai-accent, #FF6B35);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#gadaj-z-ai-root .gzai-consent-policy:hover {
  text-decoration-thickness: 2px;
}
#gadaj-z-ai-root .gzai-consent-accept {
  margin-top: 6px;
  padding: 12px 24px;
  min-height: 44px;
  border: none;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--gzai-accent, #FF6B35) 0%, #E5207B 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms;
}
#gadaj-z-ai-root .gzai-consent-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.35);
}
#gadaj-z-ai-root .gzai-consent-accept:active {
  transform: translateY(0);
}

/* Consent block (RODO 'banner' mode — legacy inline checkbox) */
#gadaj-z-ai-root #gzai-consent {
  padding: 10px 12px;
  background: #F5F7FA;
  border-top: 1px solid #E5E9EF;
  font-size: 12px;
  color: #4A5568;
  flex-shrink: 0;
}
#gadaj-z-ai-root #gzai-consent label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  line-height: 1.4;
}
#gadaj-z-ai-root #gzai-consent input[type="checkbox"] {
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--gzai-accent, #FF6B35);
}
#gadaj-z-ai-root #gzai-consent a {
  color: var(--gzai-accent, #FF6B35);
  text-decoration: underline;
}
#gadaj-z-ai-root #gzai-consent.gzai-consent-leaving {
  animation: gzai-consent-banner-out 280ms cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes gzai-consent-banner-out {
  0%   { opacity: 1; max-height: 80px; padding-top: 10px; padding-bottom: 10px; }
  100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
}

/* Form */
#gadaj-z-ai-root #gzai-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid #E5E9EF;
  flex-shrink: 0;
}
#gadaj-z-ai-root #gzai-input {
  flex: 1;
  resize: none;
  border: 1px solid #D6DCE5;
  border-radius: 5px;
  padding: 9px 11px;
  font-size: calc(14px * var(--gzai-font-scale, 1));
  font-family: inherit;
  line-height: 1.4;
  min-height: 38px;
  max-height: 120px;
  color: #0D1B2E;
  background: #F5F7FA;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#gadaj-z-ai-root #gzai-input::placeholder { color: #8A9BB0; }
#gadaj-z-ai-root #gzai-input:focus {
  border-color: var(--gzai-accent, #FF6B35);
  background: #fff;
}
#gadaj-z-ai-root #gzai-input:disabled {
  background: #EEF1F5;
  color: #8A9BB0;
  cursor: not-allowed;
}
#gadaj-z-ai-root #gzai-send {
  width: 44px;
  height: 38px;
  border-radius: 5px;
  background: var(--gzai-accent, #FF6B35);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, opacity 0.15s ease;
}
#gadaj-z-ai-root #gzai-send:hover { filter: brightness(0.9); }
#gadaj-z-ai-root #gzai-send:active { transform: scale(0.95); }
#gadaj-z-ai-root #gzai-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Actions row */
#gadaj-z-ai-root #gzai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 10px;
  background: #fff;
  flex-shrink: 0;
}
#gadaj-z-ai-root #gzai-actions button {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #D6DCE5;
  background: #fff;
  color: #0D1B2E;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease;
}
#gadaj-z-ai-root #gzai-actions button:hover {
  border-color: var(--gzai-accent, #FF6B35);
  color: var(--gzai-accent, #FF6B35);
}

/* Faza H+ Etap 7: tryb „Głębsza analiza" — gradient panelu + active toggle.
   Włącza go klik #gzai-deep (toggle), bot pisze custom intro, wszystkie
   kolejne wiadomości wysyłane są z deepAnalysis=true. */
#gadaj-z-ai-root #gzai-panel.gzai-deep-mode #gzai-messages {
  background-color: #1E1B3A;
  background-image:
    linear-gradient(180deg, rgba(30, 27, 58, 0.92) 0%, rgba(45, 27, 78, 0.96) 50%, rgba(20, 30, 60, 0.94) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='240' viewBox='0 0 360 240'><g fill='none' stroke='%23A78BFA' stroke-width='1.2' stroke-linecap='round' opacity='0.18'><path d='M-20 40 Q 40 10 90 38 T 200 32 T 320 48 T 420 30'/><path d='M-20 95 Q 55 72 110 98 T 230 90 T 340 108 T 440 90'/><path d='M-20 150 Q 48 128 100 152 T 220 144 T 330 162 T 430 146'/><path d='M-20 205 Q 60 182 120 208 T 240 200 T 350 218 T 450 202'/></g></svg>");
}
#gadaj-z-ai-root #gzai-panel.gzai-deep-mode .gzai-assistant .gzai-msg {
  background: rgba(255, 255, 255, 0.96);
  color: #0D1B2E;
}
#gadaj-z-ai-root #gzai-panel.gzai-deep-mode .gzai-assistant .gzai-msg-name {
  color: rgba(255, 255, 255, 0.9);
}
#gadaj-z-ai-root #gzai-actions button.gzai-deep-active {
  background: var(--gzai-accent, #FF6B35);
  color: #fff;
  border-color: var(--gzai-accent, #FF6B35);
}
#gadaj-z-ai-root #gzai-actions button.gzai-deep-active:hover {
  filter: brightness(1.05);
  color: #fff;
}

/* Mobile */
@media (max-width: 480px) {
  #gadaj-z-ai-root { bottom: 16px; right: 16px; }
  #gadaj-z-ai-root.gzai-pos-BL { right: auto; left: 16px; }
  /* Mobile fullscreen — panel wypelnia CALOSC ekranu telefonu (edge-to-edge),
     bez ramek, bez radiusu na zewnetrznych krawedziach. Uzywamy 100dvh
     (dynamic viewport) zeby panel poprawnie obsluzyl chrome przegladarki
     mobilnej (adres bar). FAB chowamy gdy panel otwarty (regula nizej). */
  #gadaj-z-ai-root #gzai-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  #gadaj-z-ai-root.gzai-pos-BL #gzai-panel {
    right: 0 !important;
    left: 0 !important;
  }
  /* FAB ukryty kiedy panel otwarty — uzytkownik wraca do strony przez
     przycisk X w headerze chatu. */
  #gadaj-z-ai-root.gzai-open #gzai-btn {
    display: none !important;
  }

  /* Header — kompaktowy ukad zeby tytul + 4 buttony zmiescily sie w jednym
     wierszu na waskim ekranie (320-430px). Bez tego tytul/subtitle zawijal
     sie na 3 wiersze.
     Padding-top respektuje notch (env safe-area-inset-top) bo panel teraz
     dochodzi do gornej krawedzi telefonu. */
  #gadaj-z-ai-root #gzai-header {
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px;
    gap: 6px;
  }
  /* Composer — padding-bottom respektuje home indicator iPhone */
  #gadaj-z-ai-root #gzai-composer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #gadaj-z-ai-root #gzai-avatar {
    width: 32px;
    height: 32px;
  }
  #gadaj-z-ai-root #gzai-title,
  #gadaj-z-ai-root #gzai-subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Pct readouty (100% / 125%) ukryte na mobile — zostaja same ikony
     (A+, ⇲, ↻). Zmniejsza buttony z ~50px szer do ~36px. */
  #gadaj-z-ai-root .gzai-header-btn-pct {
    display: none;
  }
  #gadaj-z-ai-root .gzai-header-btn {
    padding: 6px 8px;
    min-width: 0;
  }
  /* Font zoom button — ukryty na mobile, browser ma natywny pinch-to-zoom. */
  #gadaj-z-ai-root #gzai-font-btn {
    display: none;
  }
}

/* ===================================================================
   Faza G — FAB shape + pulse animations (Task 13)
   =================================================================== */

/* FAB shape override (default is 50% circle from line 32) */
#gadaj-z-ai-root.gzai-fab-rounded #gzai-btn { border-radius: 6px; }
#gadaj-z-ai-root.gzai-fab-rounded #gzai-btn img.gzai-avatar-img { border-radius: 6px; }

/* Position relative on #gzai-btn so ::before/::after anchor correctly.
   Also allow overflow:visible for radar rings which scale past button edge. */
#gadaj-z-ai-root #gzai-btn { position: relative; }
#gadaj-z-ai-root.gzai-pulse-radar #gzai-btn { overflow: visible; }

/* Pulse: radar — two expanding rings */
#gadaj-z-ai-root.gzai-pulse-radar #gzai-btn::before,
#gadaj-z-ai-root.gzai-pulse-radar #gzai-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--gzai-accent, #FF6B35);
  opacity: 0;
  animation: gzai-radar 1200ms ease-out infinite;
  pointer-events: none;
}
#gadaj-z-ai-root.gzai-pulse-radar #gzai-btn::after { animation-delay: 400ms; }
@keyframes gzai-radar {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0;   }
}

/* Pulse: breathe */
#gadaj-z-ai-root.gzai-pulse-breathe #gzai-btn {
  animation: gzai-breathe 2000ms ease-in-out infinite;
}
@keyframes gzai-breathe {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.06); }
}

/* Pulse: bounce — 2 bounces per 8s */
#gadaj-z-ai-root.gzai-pulse-bounce #gzai-btn {
  animation: gzai-bounce 8000ms ease-in-out infinite;
}
@keyframes gzai-bounce {
  0%, 10%, 20%, 100% { transform: translateY(0); }
  5%, 15%            { transform: translateY(-6px); }
}

/* Reduced motion — kill all FAB animations */
@media (prefers-reduced-motion: reduce) {
  #gadaj-z-ai-root #gzai-btn,
  #gadaj-z-ai-root #gzai-btn::before,
  #gadaj-z-ai-root #gzai-btn::after {
    animation: none !important;
  }
  #gadaj-z-ai-root .gzai-msg,
  #gadaj-z-ai-root .gzai-msg-meta,
  #gadaj-z-ai-root .gzai-assistant .gzai-bubble,
  #gadaj-z-ai-root .gzai-bubble.gzai-streaming::after {
    animation: none !important;
  }
  #gadaj-z-ai-root .gzai-bubble.gzai-streaming::after {
    opacity: 1;
  }
}

/* Pulse disabled once user has opened the panel (sticky per session).
   Separate from .gzai-open (which toggles panel visibility) because we
   only want to suppress the pulse, not panel show/hide. */
#gadaj-z-ai-root.gzai-opened-once #gzai-btn { animation: none !important; }
#gadaj-z-ai-root.gzai-opened-once #gzai-btn::before,
#gadaj-z-ai-root.gzai-opened-once #gzai-btn::after {
  animation: none !important;
  opacity: 0;
}

/* ===================================================================
   Faza G — Splash screen (Task 14)
   Overlays the panel body for ~1.5 s on first open in the session.
   =================================================================== */

#gadaj-z-ai-root #gzai-splash {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Cala tresc wycentrowana — logo + greeting + reszta jako blok na srodku. */
  justify-content: center;
  gap: 18px;
  padding: 32px 24px;
  /* Configurable bg — default dark (emedia24), override per-site (np. Lalak: białe). */
  background: var(--gzai-splash-bg, linear-gradient(180deg, #0A0F1E 0%, #101830 50%, #0D1225 100%));
  border-radius: 7px;
  opacity: 0;
  /* 900ms fade-in (was 700ms) — bardziej subtelne przejście */
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 20;
  pointer-events: none;
}
#gadaj-z-ai-root #gzai-splash[data-visible="1"] { opacity: 1; }

/* Splash brand logo — z fade-in od pierwszego momentu, nie translateY (delikatne). */
#gadaj-z-ai-root .gzai-splash-brand-logo {
  animation: gzai-splash-fade-soft 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  margin-bottom: 8px;
}
#gadaj-z-ai-root .gzai-splash-brand-logo img {
  display: block;
  max-width: 200px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@keyframes gzai-splash-fade-soft {
  0%   { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

/* Powitalny napis — kolor + opcjonalny override przez --gzai-splash-text-color
   (np. ciemny tekst na białym tle Lalaka). Łagodniejszy fade-in po logo. */
#gadaj-z-ai-root .gzai-splash-greeting {
  font: 500 16px/1.55 Outfit, system-ui, sans-serif;
  color: var(--gzai-splash-text-color, #FFFFFF);
  text-align: center;
  letter-spacing: -0.005em;
  max-width: 340px;
  animation: gzai-splash-fade-soft 1200ms cubic-bezier(0.22, 1, 0.36, 1) 350ms both;
}

#gadaj-z-ai-root .gzai-splash-logo {
  animation: gzai-splash-logo-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes gzai-splash-logo-in {
  0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
#gadaj-z-ai-root .gzai-splash-logo img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
  width: 128px;
  height: 128px;
  box-shadow: 0 8px 32px rgba(255, 107, 53, 0.18), 0 0 0 4px rgba(255, 255, 255, 0.04);
}
#gadaj-z-ai-root .gzai-splash-intro {
  font: 500 14px/1.4 Outfit, system-ui, sans-serif;
  color: var(--gzai-splash-muted-color, #8A9BB0);
  text-align: center;
  letter-spacing: 0.02em;
  animation: gzai-splash-text-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}
#gadaj-z-ai-root .gzai-splash-persona {
  font: 600 22px/1.3 Outfit, system-ui, sans-serif;
  color: var(--gzai-splash-text-color, #ffffff);
  text-align: center;
  letter-spacing: -0.01em;
  margin-top: -6px;
  animation: gzai-splash-text-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 350ms both;
}
/* Tryb "minimal splash" — gdy aktywny dla Lalaka (klasa na splashu),
   ukrywa intro/persona/company (bo tekst greeting już zawiera te info). */
#gadaj-z-ai-root #gzai-splash.gzai-splash-minimal .gzai-splash-intro,
#gadaj-z-ai-root #gzai-splash.gzai-splash-minimal .gzai-splash-persona,
#gadaj-z-ai-root #gzai-splash.gzai-splash-minimal .gzai-splash-company,
#gadaj-z-ai-root #gzai-splash.gzai-splash-minimal .gzai-splash-anim {
  display: none !important;
}
@keyframes gzai-splash-text-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
#gadaj-z-ai-root .gzai-splash-title {
  font: 600 18px/1.4 Outfit, system-ui, sans-serif;
  color: #ffffff;
  text-align: center;
}
#gadaj-z-ai-root .gzai-splash-company {
  font: 400 13px/1.4 Outfit, system-ui, sans-serif;
  color: var(--gzai-splash-muted-color, #8A9BB0);
  text-align: center;
  animation: gzai-splash-text-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;
}

#gadaj-z-ai-root .gzai-splash-anim {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Disclaimer prawny — mały, stonowany tekst pod greetingiem.
   Widoczny ZAWSZE (też w trybie minimal — to informacja o charakterze AI). */
#gadaj-z-ai-root .gzai-splash-disclaimer {
  font: 400 11px/1.5 Outfit, system-ui, sans-serif;
  color: var(--gzai-splash-muted-color, #8A9BB0);
  text-align: center;
  max-width: 340px;
  margin-top: 12px;
  letter-spacing: 0.01em;
  animation: gzai-splash-text-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 600ms both;
}
#gadaj-z-ai-root .gzai-splash-anim-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 3px;
  border-radius: 50%;
  background: #FF6B35;
  animation: gzai-splash-dot 1200ms ease-in-out infinite;
}
#gadaj-z-ai-root .gzai-splash-anim-dots span:nth-child(2) { animation-delay: 200ms; }
#gadaj-z-ai-root .gzai-splash-anim-dots span:nth-child(3) { animation-delay: 400ms; }
@keyframes gzai-splash-dot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-4px); }
}

#gadaj-z-ai-root .gzai-splash-anim-fade-greeting {
  animation: gzai-fade-in 600ms ease-out both;
  font: 600 20px/1 Outfit, system-ui, sans-serif;
  color: #ffffff;
}
@keyframes gzai-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#gadaj-z-ai-root .gzai-typewriter {
  border-right: 2px solid #FF6B35;
  white-space: nowrap;
  overflow: hidden;
  animation: gzai-type 1200ms steps(8) 1 both;
  font: 600 20px/1 Outfit, system-ui, sans-serif;
  color: #ffffff;
  display: inline-block;
}
@keyframes gzai-type {
  from { width: 0; }
  to   { width: 7ch; }
}

@media (prefers-reduced-motion: reduce) {
  #gadaj-z-ai-root #gzai-splash { transition: none; }
  #gadaj-z-ai-root .gzai-splash-anim-dots span,
  #gadaj-z-ai-root .gzai-typewriter,
  #gadaj-z-ai-root .gzai-splash-anim-fade-greeting {
    animation: none !important;
  }
}

/* ===================================================================
   Faza G — Welcome cards (Task 15)
   3 suggested-question cards rendered below the greeting on first open.
   =================================================================== */

#gadaj-z-ai-root .gzai-welcome-cards {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 8px 12px 4px;
  /* Centered & narrower than the bubble for a calmer look. */
  max-width: 420px;
  margin: 0 auto;
  transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
#gadaj-z-ai-root .gzai-welcome-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid rgba(13, 27, 46, 0.10);
  border-radius: 12px;
  color: #0D1B2E;
  text-align: left;
  font: 500 calc(14px * var(--gzai-font-scale, 1))/1.4 Outfit, system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(13, 27, 46, 0.04);
  transition: background 280ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 280ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Each card animates in when appended (JS appends one by one with stagger).
     Slow + smooth: 1100ms with cubic-bezier(0.16, 1, 0.3, 1) "soft-out" easing.
     Fade + lift + slight scale-up for a calm reveal. */
  animation: gzai-card-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes gzai-card-in {
  0%   { opacity: 0; transform: translateY(20px) scale(0.96); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
#gadaj-z-ai-root .gzai-welcome-card:hover {
  background: rgba(255, 107, 53, 0.04);
  border-color: var(--gzai-accent, #FF6B35);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.12);
}
#gadaj-z-ai-root .gzai-welcome-card-icon {
  color: #FF6B35;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  #gadaj-z-ai-root .gzai-welcome-cards { transition: none; }
}

/* ===================================================================
   Faza H — Rich catalog cards (Task 27)
   =================================================================== */

/* Horizontal scroll container — minimalist carousel.
   Scrollbar prawie niewidoczny. Drag-to-scroll w widget.js z momentum.
   scroll-snap proximity (nie mandatory) — soft snap, user kontroluje przewijanie. */
.emedia-chat-cards {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 8px 0;
  padding: 4px 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;        /* z mandatory — proximity = płynniejsze */
  overscroll-behavior-x: contain;       /* nie bleed scroll do strony */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
}
.emedia-chat-cards.gzai-dragging { cursor: grabbing; scroll-behavior: auto; }
.emedia-chat-cards::-webkit-scrollbar { height: 2px; }
.emedia-chat-cards::-webkit-scrollbar-track { background: transparent; }
.emedia-chat-cards::-webkit-scrollbar-thumb { background: rgba(13, 27, 46, 0.08); border-radius: 1px; }
.emedia-chat-cards:hover::-webkit-scrollbar-thumb { background: rgba(13, 27, 46, 0.18); }

/* Karty 20% mniejsze niż w v1.7.8 (200/220/240 → 160/180/200) */
.emedia-chat-card {
  position: relative;
  flex: 0 0 160px;
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid rgba(13, 27, 46, 0.08);
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  min-height: 175px;
  max-height: 225px;
  display: flex;
  flex-direction: column;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  font-family: Outfit, system-ui, sans-serif;
  color: #0D1B2E;
  box-shadow: 0 1px 2px rgba(13, 27, 46, 0.04);
  animation: gzai-card-in 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  user-select: none;
  -webkit-user-select: none;
}
.emedia-chat-card:hover {
  border-color: rgba(255, 107, 53, 0.30);
  box-shadow: 0 4px 12px rgba(13, 27, 46, 0.08);
  transform: translateY(-1px);
}
/* +15% wolniejsze i opóźnione, gentler easing curve dla płynniejszego wejścia.
   Krzywa cubic-bezier(0.32, 0.72, 0, 1) = "Apple swift out" — bardzo gładkie. */
.emedia-chat-card {
  animation-duration: 1610ms !important;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.emedia-chat-card:nth-child(1) { animation-delay: 230ms; }
.emedia-chat-card:nth-child(2) { animation-delay: 632ms; }
.emedia-chat-card:nth-child(3) { animation-delay: 1035ms; }
.emedia-chat-card:nth-child(4) { animation-delay: 1437ms; }
.emedia-chat-card:nth-child(5) { animation-delay: 1840ms; }
.emedia-chat-card:nth-child(n+6) { animation-delay: 2242ms; }
@keyframes gzai-card-in {
  0%   { opacity: 0; transform: translateY(18px) scale(0.93); }
  40%  { opacity: 0.55; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.emedia-chat-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #f4f6f9;  /* placeholder gdy obraz się ładuje */
}
/* Universal placeholder image — gdy produkt nie ma featured image w WC.
   Brand color gradient + duża pierwsza litera tytułu. color-mix() ma support
   we wszystkich nowoczesnych przeglądarkach (2023+). */
.emedia-chat-card__placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(
    135deg,
    var(--gzai-accent, #FF6B35) 0%,
    color-mix(in srgb, var(--gzai-accent, #FF6B35) 65%, white) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font: 700 calc(48px * var(--gzai-font-scale, 1)) / 1 Outfit, system-ui, sans-serif;
  letter-spacing: -1px;
  user-select: none;
  -webkit-user-select: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
}
/* Subtelny pattern (kropkowane tło) — żeby placeholder nie wyglądał płasko */
.emedia-chat-card__placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 12px 12px;
  pointer-events: none;
}
.emedia-chat-card__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #FF6B35;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  z-index: 1;
  letter-spacing: 0.3px;
}
.emedia-chat-card__body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.emedia-chat-card__body h4 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  color: #0D1B2E;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.emedia-chat-card__subtitle {
  font-size: 11px;
  color: #8A9BB0;
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.emedia-chat-card__desc {
  font-size: 12px;
  color: #4A5568;
  margin: 4px 0 0 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.emedia-chat-card__price {
  color: #FF6B35;
  font-weight: 700;
  font-size: 14px;
  margin-top: auto;
  padding-top: 8px;
}
/* CTA jako delikatny tekst-link, nie ciężki przycisk */
.emedia-chat-card__cta {
  background: transparent;
  color: #FF6B35;
  border: none;
  padding: 6px 0 2px 0;
  border-radius: 0;
  font-weight: 600;
  cursor: pointer;
  min-height: 28px;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 150ms ease;
}
.emedia-chat-card__cta::after {
  content: '→';
  font-size: 14px;
  transition: transform 150ms ease;
}
.emedia-chat-card__cta:hover { gap: 6px; }
.emedia-chat-card__cta:hover::after { transform: translateX(2px); }

/* Wider cards on bigger viewports (też -20%: 220→180, 240→200) */
@media (min-width: 480px) {
  .emedia-chat-card { flex: 0 0 180px; }
}
@media (min-width: 768px) {
  .emedia-chat-card { flex: 0 0 200px; }
}

/* ===================================================================
   Faza H — Widget width: pro+catalog 480px, default 380px (Task 28)
   Tablet/srednie ekrany (481-768px): panel niemal full-width, ale nie
   rozciagniety do krawedzi (zostawiamy 16px marginesu).
   Telefony <=480px: fullscreen (regula wyzej, @media max-width:480px) —
   tu NIE nadpisujemy zeby gap z prawej nie powstal.
   =================================================================== */
@media (min-width: 481px) and (max-width: 768px) {
  #gadaj-z-ai-root #gzai-panel {
    width: calc(100vw - 16px) !important;
  }
}

/* ===================================================================
   Faza H+ — Close prompt overlay (e-mail summary capture przy zamykaniu)
   =================================================================== */
#gadaj-z-ai-root .gzai-close-prompt {
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 46, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  opacity: 0;
  transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1);
  padding: 16px;
  pointer-events: none; /* nie blokuj klikow w panel gdy overlay niewidoczny */
}
/* HARD HIDE — ID+class specificity nadpisuje UA [hidden] { display:none } */
#gadaj-z-ai-root .gzai-close-prompt[hidden] {
  display: none !important;
}
#gadaj-z-ai-root .gzai-close-prompt.gzai-close-prompt-visible {
  opacity: 1;
  pointer-events: auto;
}
#gadaj-z-ai-root .gzai-close-prompt-card {
  position: relative;
  background: #ffffff;
  border-radius: 7px;
  padding: 24px 20px 20px;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  transform: translateY(8px) scale(0.96);
  transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
}
#gadaj-z-ai-root .gzai-close-prompt-visible .gzai-close-prompt-card {
  transform: translateY(0) scale(1);
}
#gadaj-z-ai-root .gzai-close-prompt-x {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: #8A9BB0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: color 150ms ease, background 150ms ease;
}
#gadaj-z-ai-root .gzai-close-prompt-x:hover {
  color: #0D1B2E;
  background: rgba(13, 27, 46, 0.05);
}
#gadaj-z-ai-root .gzai-close-prompt-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 107, 53, 0.10);
  color: #FF6B35;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
#gadaj-z-ai-root .gzai-close-prompt-icon-ok {
  background: rgba(61, 204, 126, 0.12);
  color: #3DCC7E;
}
#gadaj-z-ai-root .gzai-close-prompt-title {
  font: 600 16px/1.3 Outfit, system-ui, sans-serif;
  color: #0D1B2E;
  margin: 0 0 8px;
  text-align: center;
}
#gadaj-z-ai-root .gzai-close-prompt-text {
  font: 400 13px/1.5 Outfit, system-ui, sans-serif;
  color: #4A5568;
  margin: 0 0 16px;
  text-align: center;
}
#gadaj-z-ai-root .gzai-close-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#gadaj-z-ai-root .gzai-close-prompt-btn {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 6px;
  font: 600 13px/1 Outfit, system-ui, sans-serif;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
#gadaj-z-ai-root .gzai-close-prompt-btn-primary {
  background: var(--gzai-accent, #FF6B35);
  color: #ffffff;
}
#gadaj-z-ai-root .gzai-close-prompt-btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
#gadaj-z-ai-root .gzai-close-prompt-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
#gadaj-z-ai-root .gzai-close-prompt-btn-ghost {
  background: transparent;
  color: #8A9BB0;
  border-color: rgba(13, 27, 46, 0.10);
}
#gadaj-z-ai-root .gzai-close-prompt-btn-ghost:hover {
  background: rgba(13, 27, 46, 0.04);
  color: #0D1B2E;
  border-color: rgba(13, 27, 46, 0.18);
}
#gadaj-z-ai-root .gzai-close-prompt-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#gadaj-z-ai-root .gzai-close-prompt-form input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(13, 27, 46, 0.15);
  border-radius: 5px;
  font: 400 14px/1.4 Outfit, system-ui, sans-serif;
  color: #0D1B2E;
  background: #ffffff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
}
#gadaj-z-ai-root .gzai-close-prompt-form input:focus {
  outline: none;
  border-color: var(--gzai-accent, #FF6B35);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12);
}
#gadaj-z-ai-root .gzai-close-prompt-form input::placeholder {
  color: #8A9BB0;
}
#gadaj-z-ai-root .gzai-close-prompt-error {
  font: 500 12px/1.4 Outfit, system-ui, sans-serif;
  color: #E5207B;
  margin: 4px 0 0;
  padding: 6px 10px;
  background: rgba(229, 32, 123, 0.08);
  border-radius: 4px;
}

/* ============================================================
 * Real-estate card (template: deweloperska)
 * ============================================================ */
#gadaj-z-ai-root .emedia-chat-card--real-estate {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  /* Nadpisuje max-height: 225px z .emedia-chat-card (linia 1227).
     Karta real-estate ma więcej elementów (obrazki side-by-side, parent
     badge, title, metryki, meta inwestycji, ceny, CTA row), więc niski
     cap obcinał cenę i przyciski. 380px daje zapas na typowy układ. */
  max-height: 380px;
}
#gadaj-z-ai-root .emedia-chat-card--real-estate:hover {
  border-color: var(--gzai-accent, #FF6B35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
#gadaj-z-ai-root .emedia-chat-card--real-estate .emedia-chat-card__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #f3f4f6;
  aspect-ratio: 16 / 9;
}
#gadaj-z-ai-root .emedia-chat-card--real-estate .emedia-chat-card__floor-plan,
#gadaj-z-ai-root .emedia-chat-card--real-estate .emedia-chat-card__parent-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #ffffff;
}
#gadaj-z-ai-root .emedia-chat-card--real-estate .emedia-chat-card__floor-plan {
  object-fit: contain;
  padding: 8px;
}
#gadaj-z-ai-root .emedia-chat-card__badge--availability {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font: 600 11px/1 Outfit, system-ui, sans-serif;
  padding: 4px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #ffffff;
  background: #6b7280;
}
#gadaj-z-ai-root .emedia-chat-card__badge--available {
  background: #3DCC7E;
}
#gadaj-z-ai-root .emedia-chat-card__badge--reserved {
  background: #F5A623;
}
#gadaj-z-ai-root .emedia-chat-card__badge--sold {
  background: #E5207B;
}
#gadaj-z-ai-root .emedia-chat-card--real-estate .emedia-chat-card__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#gadaj-z-ai-root .emedia-chat-card__parent-badge {
  font: 500 10px/1.2 Outfit, system-ui, sans-serif;
  color: var(--gzai-accent, #FF6B35);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
#gadaj-z-ai-root .emedia-chat-card--real-estate .emedia-chat-card__body h4 {
  font: 600 16px/1.3 Outfit, system-ui, sans-serif;
  color: #0D1B2E;
  margin: 0;
}
#gadaj-z-ai-root .emedia-chat-card__metrics {
  font: 400 12px/1.4 Outfit, system-ui, sans-serif;
  color: #6b7280;
  margin: 0;
}
/* Faza D — meta inwestycji per mieszkanie (adres / dzielnica / termin oddania) */
#gadaj-z-ai-root .emedia-chat-card__investment-meta {
  font: 400 11px/1.4 Outfit, system-ui, sans-serif;
  color: #9ca3af;
  margin: 2px 0 0;
}
#gadaj-z-ai-root .emedia-chat-card__price-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
#gadaj-z-ai-root .emedia-chat-card--real-estate .emedia-chat-card__price {
  font: 700 18px/1.2 Outfit, system-ui, sans-serif;
  color: #0D1B2E;
}
#gadaj-z-ai-root .emedia-chat-card__price-per-m2 {
  font: 500 12px/1.2 Outfit, system-ui, sans-serif;
  color: #6b7280;
}
#gadaj-z-ai-root .emedia-chat-card--real-estate {
  /* Stagger animacja wejścia spójna z inwestycjami / kontaktami */
  opacity: 0;
  transform: translateY(16px);
  animation: gzai-inv-enter 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Mieszkania (real-estate) jako horizontal scroller — ze strzałkami + drag */
#gadaj-z-ai-root .emedia-chat-cards--scrollable {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 4px 14px;
  margin-top: 8px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  cursor: grab;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.12) transparent;
}
#gadaj-z-ai-root .emedia-chat-cards--scrollable::-webkit-scrollbar { height: 6px; }
#gadaj-z-ai-root .emedia-chat-cards--scrollable::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12); border-radius: 3px;
}
#gadaj-z-ai-root .emedia-chat-cards--scrollable .emedia-chat-card--real-estate {
  flex: 0 0 260px;
  margin: 0;
}
#gadaj-z-ai-root .emedia-chat-card--real-estate .emedia-chat-card__cta-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
#gadaj-z-ai-root .emedia-chat-card--real-estate .emedia-chat-card__cta {
  flex: 1 1 auto;
  background: var(--gzai-accent, #FF6B35);
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 9px 12px;
  font: 600 13px/1 Outfit, system-ui, sans-serif;
  cursor: pointer;
  min-height: 36px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: opacity 150ms ease, background 150ms ease;
}
#gadaj-z-ai-root .emedia-chat-card--real-estate .emedia-chat-card__cta::after {
  content: none;
}
#gadaj-z-ai-root .emedia-chat-card--real-estate .emedia-chat-card__cta:hover {
  opacity: 0.9;
}
#gadaj-z-ai-root .emedia-chat-card--real-estate .emedia-chat-card__cta--secondary {
  background: transparent;
  color: var(--gzai-accent, #FF6B35);
  border: 1px solid var(--gzai-accent, #FF6B35);
  flex: 0 1 auto;
}
#gadaj-z-ai-root .emedia-chat-card--real-estate .emedia-chat-card__cta--secondary:hover {
  background: rgba(255, 107, 53, 0.08);
  opacity: 1;
}

/* ============================================================ */
/*  Contact cards (boxy z handlowcami) — horizontal scroll +     */
/*  auto-przewijanie + drag (spójne z inwestycjami)              */
/* ============================================================ */
#gadaj-z-ai-root .emedia-chat-contacts {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 12px;
  margin-top: 8px;
  -webkit-overflow-scrolling: touch;
  /* BEZ scroll-snap — przewijanie płynne, strzałki kontrolują kroki */
  scroll-behavior: smooth;
  cursor: grab;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.12) transparent;
}
#gadaj-z-ai-root .emedia-chat-contacts::-webkit-scrollbar {
  height: 6px;
}
#gadaj-z-ai-root .emedia-chat-contacts::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}
#gadaj-z-ai-root .emedia-chat-contact {
  flex: 0 0 200px;
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 7px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  /* Stagger animacja wejścia spójna z inwestycjami */
  opacity: 0;
  transform: translateY(16px);
  animation: gzai-inv-enter 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#gadaj-z-ai-root .emedia-chat-contact__avatar {
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
}
#gadaj-z-ai-root .emedia-chat-contact__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
#gadaj-z-ai-root .emedia-chat-contact__initials {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 18px/1 Outfit, system-ui, sans-serif;
  color: #ffffff;
  letter-spacing: 0.5px;
}
#gadaj-z-ai-root .emedia-chat-contact__name {
  margin: 0 0 4px;
  font: 600 14px/1.3 Outfit, system-ui, sans-serif;
  color: #1a202c;
}
#gadaj-z-ai-root .emedia-chat-contact__role {
  margin: 0 0 12px;
  font: 400 11px/1.4 Outfit, system-ui, sans-serif;
  color: #6b7280;
  min-height: 30px;
}
#gadaj-z-ai-root .emedia-chat-contact__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
#gadaj-z-ai-root .emedia-chat-contact__btn {
  display: block;
  padding: 8px 10px;
  border-radius: 5px;
  font: 600 12px/1.2 Outfit, system-ui, sans-serif;
  text-decoration: none;
  text-align: center;
  transition: opacity 150ms ease, background 150ms ease;
  min-height: 32px;
}
#gadaj-z-ai-root .emedia-chat-contact__btn--phone {
  background: var(--gzai-accent, #FF6B35);
  color: #ffffff;
}
#gadaj-z-ai-root .emedia-chat-contact__btn--phone:hover {
  opacity: 0.9;
}
#gadaj-z-ai-root .emedia-chat-contact__btn--email {
  background: transparent;
  color: var(--gzai-accent, #FF6B35);
  border: 1px solid var(--gzai-accent, #FF6B35);
}
#gadaj-z-ai-root .emedia-chat-contact__btn--email:hover {
  background: rgba(255, 107, 53, 0.08);
}

/* ============================================================ */
/*  Wrapper ze strzałkami + horizontal scrollery (inwestycje,    */
/*  kontakty, mieszkania real-estate)                            */
/* ============================================================ */
#gadaj-z-ai-root .emedia-chat-scroll-wrap {
  position: relative;
  width: 100%;
}
#gadaj-z-ai-root .emedia-chat-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0,0,0,0.08);
  color: #1a202c;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  opacity: 1;
  transition: opacity 200ms ease, background 150ms ease, transform 150ms ease;
}
#gadaj-z-ai-root .emedia-chat-arrow:hover {
  background: var(--gzai-accent, #FF6B35);
  color: var(--gzai-fab-icon-color, #fff);
  transform: translateY(-50%) scale(1.05);
}
#gadaj-z-ai-root .emedia-chat-arrow--left { left: -2px; }
#gadaj-z-ai-root .emedia-chat-arrow--right { right: -2px; }
#gadaj-z-ai-root .emedia-chat-arrow--hidden {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================ */
/*  Investment cards (inwestycje deweloperskie) — horizontal     */
/*  scroll z mouse drag + touch swipe + stagger animacja wejścia */
/*  BEZ scroll-snap — płynne przewijanie, kontrolowane strzałkami */
/* ============================================================ */
#gadaj-z-ai-root .emedia-chat-investments {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 4px 14px;
  margin-top: 8px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
  cursor: grab;
  user-select: none;
}
#gadaj-z-ai-root .emedia-chat-investments::-webkit-scrollbar {
  height: 6px;
}
#gadaj-z-ai-root .emedia-chat-investments::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 3px;
}
#gadaj-z-ai-root .emedia-chat-scroll--grabbing {
  cursor: grabbing !important;
  scroll-behavior: auto;
}
#gadaj-z-ai-root .emedia-chat-investment {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(13, 27, 46, 0.06);
  /* Stagger animacja wejścia — delay ustawiany inline w renderInvestmentCard */
  opacity: 0;
  transform: translateY(16px);
  animation: gzai-inv-enter 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes gzai-inv-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
#gadaj-z-ai-root .emedia-chat-investment__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f3f4f6;
  overflow: hidden;
}
#gadaj-z-ai-root .emedia-chat-investment__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* drag scroll friendly */
}
#gadaj-z-ai-root .emedia-chat-investment__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(245, 166, 35, 0.95);
  color: #1a1a1a;
  padding: 3px 8px;
  border-radius: 3px;
  font: 600 10px/1.4 Outfit, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
#gadaj-z-ai-root .emedia-chat-investment__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#gadaj-z-ai-root .emedia-chat-investment__name {
  margin: 0;
  font: 600 14px/1.3 Outfit, system-ui, sans-serif;
  color: #1a202c;
}
#gadaj-z-ai-root .emedia-chat-investment__location {
  margin: 0;
  font: 400 12px/1.4 Outfit, system-ui, sans-serif;
  color: #6b7280;
}
/* Faza D — meta line per inwestycja (adres / dzielnica / termin oddania) */
#gadaj-z-ai-root .emedia-chat-investment__meta {
  margin: 2px 0 0;
  font: 400 11px/1.4 Outfit, system-ui, sans-serif;
  color: #9ca3af;
}
#gadaj-z-ai-root .emedia-chat-investment__price {
  margin: 4px 0 0;
  font: 600 13px/1.3 Outfit, system-ui, sans-serif;
  color: var(--gzai-accent, #FF6B35);
}
#gadaj-z-ai-root .emedia-chat-investment__cta {
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--gzai-accent, #FF6B35);
  color: var(--gzai-fab-icon-color, #ffffff);
  border-radius: 5px;
  font: 600 12px/1 Outfit, system-ui, sans-serif;
  text-decoration: none;
  text-align: center;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 150ms ease;
}
#gadaj-z-ai-root .emedia-chat-investment__cta:hover {
  opacity: 0.9;
}