:root{
  --fw-accent:#e2611e;

  /* Ikony CHATA (z trzema kropkami) jako data-URI */
  --fw-icon-chat:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
<path d='M21 11.5a8.5 8.5 0 0 1-8.5 8.5c-1.9 0-3.7-.6-5.2-1.6L3 21l2.6-4.1A8.5 8.5 0 1 1 21 11.5Z' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
<circle cx='9' cy='11.5' r='1.4' fill='%23334155'/>\
<circle cx='12' cy='11.5' r='1.4' fill='%23334155'/>\
<circle cx='15' cy='11.5' r='1.4' fill='%23334155'/>\
</svg>");

  --fw-icon-chat-hover:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
<path d='M21 11.5a8.5 8.5 0 0 1-8.5 8.5c-1.9 0-3.7-.6-5.2-1.6L3 21l2.6-4.1A8.5 8.5 0 1 1 21 11.5Z' stroke='%23e2611e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
<circle cx='9' cy='11.5' r='1.4' fill='%23e2611e'/>\
<circle cx='12' cy='11.5' r='1.4' fill='%23e2611e'/>\
<circle cx='15' cy='11.5' r='1.4' fill='%23e2611e'/>\
</svg>");
}

/* Floating Action Button */
.fwfab{
  position:fixed; right:16px; bottom:96px;
  width:56px; height:56px; border-radius:50%;
  border:1px solid rgba(15,23,42,.08);
  background:#fff; color:#334155;
  box-shadow:0 2px 6px rgba(15,23,42,.08), 0 12px 28px rgba(15,23,42,.12);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:9997;
  transition:transform .15s, box-shadow .15s, border-color .15s;
  -webkit-tap-highlight-color:transparent; backdrop-filter:saturate(160%) blur(6px);
}
.fwfab:hover{
  transform:translateY(-1px);
  border-color:rgba(15,23,42,.14);
  box-shadow:0 6px 16px rgba(15,23,42,.12), 0 20px 44px rgba(15,23,42,.16);
}

/* IKONA — zawsze chmurka */
.fwfab__icon{
  width:26px; height:26px; display:block;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-image: var(--fw-icon-chat) !important;
}
.fwfab__icon.is-search,
.fwfab .fwfab__icon.is-search{
  background-image: var(--fw-icon-chat) !important;
}

/* Hover — chmurka w kolorze akcentu */
.fwfab:hover .fwfab__icon{
  background-image: var(--fw-icon-chat-hover) !important;
}
.fwfab:hover .fwfab__icon.is-search{
  background-image: var(--fw-icon-chat-hover) !important;
}

/* Desktop – większy FAB i ikona */
@media (min-width:1024px){
  .fwfab{ width:64px; height:64px; right:24px; bottom:110px; }
  .fwfab__icon{ width:28px; height:28px; }
}

/* Backdrop */
.fwbackdrop{ position:fixed; inset:0; background:rgba(15,23,42,.65); z-index:9998; display:block; }
.fwbackdrop[hidden]{ display:none; }

/* Panel */
.fwpanel{ position:fixed; right:16px; bottom:140px; width:min(92vw, 920px); z-index:9999; display:none; }
.fwpanel.is-open{ display:block; }
.fwpanel__inner{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  box-shadow:0 12px 48px rgba(0,0,0,.18); overflow:hidden; position:relative;
}

/* Zamknięcie */
.fwpanel__close{
  position:absolute; right:10px; top:8px; border:0; background:transparent;
  font-size:22px; cursor:pointer; line-height:1; padding:6px; color:#6b7280;
}
.fwpanel__close:hover{ color:var(--fw-accent); }

/* Blokada przewijania tła */
.fw-noscroll{ overflow:hidden; overscroll-behavior:contain; touch-action:none; }

/* Fullscreen na telefonie */
@media (max-width:768px){
  .fwpanel{ inset:0; width:100vw; height:100vh; right:auto; bottom:auto; }
  .fwpanel__inner{ border-radius:0; width:100%; height:100%; display:flex; flex-direction:column; }
}

/* Przewijanie treści w panelu */
.fwpanel .fw__body{ max-height:calc(100vh - 180px); overflow:auto; }
@media (min-width:769px){ .fwpanel .fw__body{ max-height:calc(100vh - 220px); } }

/* Preferencje ruchu */
@media (prefers-reduced-motion:reduce){ .fwfab{ transition:none } }