/* SSUX AI — separate search (XXS compact) + positioning guards */
/* tylko UI; logika bez zmian */

.ssux-ai-separate{
  /* kompakt */
  --ai-radius: 8px;
  --ai-pad: 6px;
  --ai-gap: 6px;
  --ai-font: 12px;
  --ai-muted: #667085;
  --ai-border: rgba(2,8,20,.12);
  --ai-shadow: 0 1px 1px rgba(16,24,40,.03);

  margin: 6px 0;
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius);
  padding: var(--ai-pad) calc(var(--ai-pad) + 2px);
  background: #fff;
  box-shadow: var(--ai-shadow);
  font-size: var(--ai-font);

  /* ZABEZPIECZENIA POZYCJI: zawsze w normalnym przepływie */
  display: block !important;
  float: none !important;
  clear: both !important;
  position: relative !important;
  top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
  z-index: 1;
  /* jeśli rodzic to grid/flex – rozciągnij na całą szerokość */
  grid-column: 1 / -1;
  align-self: stretch;
  max-width: 100%;
}

/* gdy stoimy bezpośrednio po belce filtrów – drobny odstęp */
.listings-refine-bar + .ssux-ai-separate,
.cp-refine + .ssux-ai-separate{ margin-top: 8px; }

/* nagłówek – lekki */
.ssux-ai-head{
  display:flex; align-items:center; gap:6px;
  margin-bottom:4px; color:#004156; font-weight:600; line-height:1.1;
}
.ssux-ai-logo{ width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; }
.ssux-ai-title{ font-size:11px; }
.ssux-ai-hint{ color:var(--ai-muted); font-weight:400; font-size:11px; }

/* wiersz: input + przycisk – super gęsto */
.ssux-ai-row{
  display:grid; grid-template-columns: 1fr max-content;
  gap: var(--ai-gap); align-items:center;
}
.ssux-ai-input{
  width:100%; height:28px;
  padding:4px 8px;
  border:1px solid var(--ai-border);
  border-radius:7px; background:#fff; line-height:1; outline:0;
  font-size:12px;
}
.ssux-ai-input::placeholder{ color:#98a2b3; }

.ssux-ai-run{
  height:28px; padding:0 8px;
  border-radius:7px; border:1px solid #1fd6cd;
  background:#e9fbf9; cursor:pointer;
  font-weight:600; font-size:12px; white-space:nowrap; line-height:1;
}
.ssux-ai-input:focus{ border-color:#22c3bb; box-shadow:0 0 0 2px rgba(31,214,205,.14); }
.ssux-ai-run:hover{ background:#d9f7f4; }
.ssux-ai-run:active{ transform:translateY(1px); }

/* chipy – mikro */
.ssux-ai-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.ssux-ai-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 6px; border-radius:999px;
  border:1px solid var(--ai-border); background:#fff;
  line-height:1; font-size:10px; box-shadow:0 1px 1px rgba(16,24,40,.03);
  cursor:pointer;
}
.ssux-ai-chip:hover{ background:#f8fafc; }

/* stan ładowania */
.ssux-ai-separate.is-loading .ssux-ai-head{ opacity:.6; }
.ssux-ai-separate.is-loading .ssux-ai-run{ opacity:.85; }

/* mobile – wciąż kompakt, ale wygodne tap targets */
@media (max-width:640px){
  .ssux-ai-separate{ padding:8px; }
  .ssux-ai-row{ grid-template-columns:1fr; }
  .ssux-ai-run{ height:34px; width:100%; font-size:13px; }
  .ssux-ai-input{ height:32px; font-size:13px; }
  .ssux-ai-hint{ display:none; }
}

/* jeśli w jakimś widoku jest starszy wariant inline – też XXS i „w przepływie” */
.ssux-ai-inline{
  margin-top:6px; border:1px solid var(--ai-border);
  border-radius:7px; padding:8px;
  background:#fff; box-shadow:var(--ai-shadow); font-size:12px;
  display:block !important; float:none !important; clear:both !important;
  position:relative !important; top:auto !important; bottom:auto !important;
  grid-column:1 / -1; align-self:stretch; max-width:100%;
}
.ssux-ai-inline .ssux-ai-head{ margin-bottom:4px; }
.ssux-ai-inline .ssux-ai-chip,
.ssux-ai-inline .ssux-ai-apply{
  padding:2px 6px; font-size:10px; border-radius:999px; line-height:1;
}