/* SWAG Assist — pływający asystent produktowy.
   Paleta zgodna ze stroną główną: crimson #bc1030/#e11d3f, chrom #e9ebf1.
   Panel jest ciemny, bo tak wygląda w konfiguratorze i chcemy jednego asystenta,
   a nie dwóch różnych. */

.sa-fab{position:fixed;right:20px;bottom:20px;z-index:9998;display:flex;align-items:center;gap:13px;
  padding:15px 24px 15px 19px;border:0;border-radius:16px;cursor:pointer;
  font-family:'Oswald',Arial,sans-serif;font-size:17px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:#141414;text-align:left;
  background:linear-gradient(180deg,#ffffff,#dcdee4 55%,#aeb1bb);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -10px 16px rgba(0,0,0,.14),
             0 12px 30px -10px rgba(11,11,13,.55);
  transition:transform .18s ease,box-shadow .25s ease}
.sa-fab:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
  inset 0 -10px 16px rgba(0,0,0,.14),0 16px 36px -10px rgba(188,16,48,.5)}
.sa-fab:active{transform:translateY(1px) scale(.985)}
.sa-fab .eq{display:inline-flex;align-items:flex-end;gap:3px;height:22px;flex-shrink:0}
.sa-fab .eq i{width:3.5px;height:100%;background:#e11d3f;border-radius:2px;transform-origin:bottom;
  box-shadow:0 0 5px rgba(225,29,63,.45);animation:saEq 1.15s ease-in-out infinite}
.sa-fab .eq i:nth-child(2){animation-delay:.18s}
.sa-fab .eq i:nth-child(3){animation-delay:.36s}
.sa-fab .eq i:nth-child(4){animation-delay:.54s}
@keyframes saEq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.sa-fab-tx{display:flex;flex-direction:column;line-height:1.05}
.sa-fab-tx b{color:#bc1030;font-weight:700}
.sa-fab-tx small{font-family:'Roboto Condensed',Arial,sans-serif;font-size:11.5px;font-weight:400;
  letter-spacing:.01em;text-transform:none;color:#4a4a52;margin-top:3px}
/* Bez animacji wejścia. Kusiło, żeby przycisk elegancko wskoczył, ale każda taka
   animacja zaczyna się od opacity:0 — a gdy z jakiegokolwiek powodu nie wystartuje
   (karta otwarta w tle ma zamrożony zegar animacji, oszczędzanie energii, blokada
   w przeglądarce), główny przycisk sklepu zostaje niewidoczny. Uwagę i tak przyciąga
   pulsujący korektor, który niczego nie ukrywa. */

.sa-panel{position:fixed;right:18px;bottom:82px;z-index:9999;width:min(400px,calc(100vw - 24px));
  /* Zapas u gory MUSI zmiescic przyklejony naglowek sklepu (97px) - inaczej panel
     wchodzi pod niego i przycisk zamkniecia staje sie nieklikalny. dvh zamiast vh,
     bo na mobilnym Safari vh liczy sie razem z paskiem adresu. */
  max-height:min(580px,calc(100vh - 190px));max-height:min(580px,calc(100dvh - 190px));display:none;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#17171c,#0f0f13);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;font-family:'Roboto Condensed',Arial,sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 70px -20px rgba(0,0,0,.9),
             0 0 40px -18px rgba(225,29,63,.5)}
.sa-panel.open{display:flex}
.sa-head{display:flex;align-items:center;gap:10px;padding:13px 16px;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(188,16,48,.16),transparent);
  font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:15px;color:#fff}
.sa-head .dot{width:8px;height:8px;border-radius:50%;background:#3fae6a;box-shadow:0 0 8px #3fae6a;flex-shrink:0}
#saClose{margin-left:auto;width:40px;height:40px;flex-shrink:0;border:1px solid rgba(255,255,255,.2);
  background:#26262e;color:#fff;border-radius:10px;cursor:pointer;font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center}
#saClose:hover{color:#fff;border-color:rgba(255,255,255,.3)}

.sa-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.sa-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.55;color:#e9e6df}
.sa-msg.bot{background:#1c1c22;border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:5px;align-self:flex-start}
.sa-msg.user{background:linear-gradient(180deg,#bc1030,#8f0c24);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.sa-msg b{color:#fff}
.sa-msg i{color:#e9ebf1;font-style:italic}
.sa-tip{display:block;margin-top:8px;font-size:11.5px;color:#8b8b95;line-height:1.4}
.sa-typing{display:inline-flex;gap:4px;align-items:center;height:14px}
.sa-typing i{width:6px;height:6px;border-radius:50%;background:#e11d3f;animation:saDot 1s ease-in-out infinite}
.sa-typing i:nth-child(2){animation-delay:.16s}
.sa-typing i:nth-child(3){animation-delay:.32s}
@keyframes saDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* karta produktu w odpowiedzi */
.sa-card{display:flex;align-items:center;gap:10px;margin-top:9px;padding:8px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.sa-card img{width:44px;height:44px;flex-shrink:0;object-fit:contain;border-radius:7px;background:#fff}
.sa-card .i{flex:1;min-width:0}
.sa-card .n{display:block;color:#fff;font-size:12.5px;line-height:1.3;text-decoration:none;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sa-card .n:hover{color:#e9ebf1;text-decoration:underline}
.sa-card .p{color:#e9ebf1;font-family:'Oswald',Arial,sans-serif;font-size:14px;margin-top:2px}
.sa-add{flex-shrink:0;border:0;border-radius:8px;padding:9px 13px;cursor:pointer;
  background:linear-gradient(180deg,#e11d3f,#a30e2c);color:#fff;
  font-family:'Oswald',Arial,sans-serif;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  transition:filter .2s}
.sa-add:hover{filter:brightness(1.12)}
.sa-add.done{background:linear-gradient(180deg,#3fae6a,#2c8850);cursor:default}
.sa-add:disabled{opacity:.75}

/* wybór trybu przy pierwszym otwarciu */
.sa-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px 14px 12px;flex-shrink:0}
.sa-pick.hide{display:none}
.sa-tile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:15px 10px 13px;
  border:1px solid rgba(255,255,255,.16);border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#26262d,#17171c 55%,#101014);
  transition:transform .18s ease,border-color .25s ease}
.sa-tile:hover{transform:translateY(-2px);border-color:rgba(225,29,63,.6)}
.sa-tile svg{width:26px;height:26px;flex-shrink:0;stroke:#e11d3f;fill:none;stroke-width:1.9}
.sa-tile.voice svg{stroke:#e9ebf1}
.sa-tile b{font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.07em;font-size:14px;color:#fff}
.sa-tile small{color:#95959e;font-size:11.5px;line-height:1.3;text-align:center}

.sa-quick{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 12px;flex-shrink:0}
.sa-chip{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 12px;cursor:pointer;
  font-size:12px;color:#cfcfd6;background:rgba(255,255,255,.04);transition:all .2s}
.sa-chip:hover{color:#fff;border-color:rgba(225,29,63,.6);background:rgba(188,16,48,.18)}

.sa-form{display:flex;gap:8px;padding:12px 14px 14px;flex-shrink:0;border-top:1px solid rgba(255,255,255,.09)}
#saMic{width:46px;flex-shrink:0;border:1px solid rgba(255,85,115,.6);border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#e11d3f,#a30e2c)}
#saMic svg{width:18px;height:18px;flex-shrink:0;stroke:#fff;fill:none;stroke-width:2}
#saMic.listening{animation:saMic 1.2s infinite}
@keyframes saMic{0%,100%{box-shadow:0 0 0 0 rgba(225,29,63,.55)}50%{box-shadow:0 0 0 9px rgba(225,29,63,0)}}
#saIn{flex:1;min-width:0;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:11px 13px;
  background:#111116;color:#fff;font-size:14px;font-family:inherit}
#saIn::placeholder{color:#6f6f79}
#saIn:focus{outline:0;border-color:rgba(225,29,63,.6)}
.sa-form button[type=submit]{flex-shrink:0;border:0;border-radius:10px;padding:0 18px;cursor:pointer;
  background:#e9ebf1;color:#141414;font-family:'Oswald',Arial,sans-serif;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase}
.sa-form button[type=submit]:hover{background:#fff}

@media(max-width:560px){
  .sa-fab{right:12px;bottom:12px;padding:13px 18px 13px 15px;font-size:15px;gap:10px}
  .sa-fab-tx small{display:none}
  .sa-fab .eq{height:18px}
  .sa-panel{right:8px;left:8px;bottom:70px;width:auto;
    max-height:min(560px,calc(100vh - 190px));max-height:min(560px,calc(100dvh - 190px))}
}
@media(prefers-reduced-motion:reduce){
  .sa-fab,.sa-tile{transition:none}
  .sa-fab .eq i,.sa-typing i,#saMic.listening{animation:none}
  .sa-fab:hover,.sa-tile:hover{transform:none}
}