/* ==========================================================================
   funkcje-ai-etap1 (F5): wyszukiwarka kart pisana zwykłym zdaniem (resources/views/karty-v2/_ai_szukaj.blade.php).
   Blok między paskiem "W grze teraz" a filtrami listy (.kv2-lista ma gap, więc pasek nad nim się nie przesuwa).
   Tokeny z sbc-v2.css (--sbc2-*). Telefon: < 768 px - pole pełnej szerokości, przykłady i chipy przewijane poziomo.
   ========================================================================== */
.kv2ai { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--sbc2-ramka, #dfe3e9); border-left: 4px solid var(--sbc2-zloty, #f5a623); border-radius: 14px; padding: 12px 14px; }
.kv2ai-et { margin: 0; font-size: 14px; font-weight: 800; color: var(--sbc2-tekst, #111a24); }
.kv2ai-nowosc { display: inline-flex; align-items: center; gap: 6px; }
.kv2ai-nowosc::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sbc2-zloty, #f5a623); box-shadow: 0 0 0 3px rgba(245, 166, 35, .25); flex-shrink: 0; }
.kv2ai-form { display: flex; gap: 8px; margin: 0; }
.kv2ai-form input[type="search"] { flex: 1 1 auto; min-width: 0; height: 44px; border: 1px solid var(--sbc2-ramka, #dfe3e9); border-radius: 10px; padding: 0 14px; font-size: 15px; color: var(--sbc2-tekst, #111a24); background: #f7f8fa; }
.kv2ai-form input[type="search"]:focus { outline: 2px solid var(--sbc2-zloty, #f5a623); outline-offset: 0; background: #fff; }
.kv2ai-btn { flex: 0 0 auto; height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--sbc2-ciemny, #111a24); color: var(--sbc2-zloty, #f5a623); font-size: 15px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.kv2ai-btn:disabled { opacity: .6; cursor: wait; }
.kv2ai-podp { margin: 0; font-size: 13px; color: var(--sbc2-szary, #5b6472); line-height: 1.4; }
.kv2ai-przyklady { display: flex; flex-wrap: wrap; gap: 6px; }
.kv2ai-przyklad { border: 1px dashed var(--sbc2-szary, #5b6472); background: transparent; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; color: var(--sbc2-tekst, #111a24); cursor: pointer; white-space: nowrap; }
.kv2ai-przyklad:hover, .kv2ai-przyklad:focus-visible { border-color: var(--sbc2-zloty, #f5a623); border-style: solid; }
.kv2ai-stan { margin: 0; font-size: 13px; font-weight: 700; color: var(--sbc2-tekst, #111a24); }
.kv2ai-chipy { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--sbc2-ramka, #dfe3e9); }
.kv2ai-chipy-et { font-size: 13px; font-weight: 800; color: var(--sbc2-tekst, #111a24); margin-right: 2px; }
.kv2 a.kv2ai-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--sbc2-ciemny, #111a24); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.kv2 a.kv2ai-chip span { color: var(--sbc2-zloty, #f5a623); font-size: 16px; line-height: 1; }
.kv2 a.kv2ai-chip:hover { color: var(--sbc2-zloty, #f5a623); }
.kv2ai-brak { margin: 0; font-size: 14px; font-weight: 700; color: #b42318; }

@media (max-width: 767px) {
  .kv2ai { padding: 10px; gap: 6px; border-radius: 12px; }
  .kv2ai-et { font-size: 13px; }
  .kv2ai-form input[type="search"] { font-size: 16px; height: 42px; }
  .kv2ai-btn { height: 42px; padding: 0 14px; }
  .kv2ai-podp { font-size: 12px; }
  .kv2ai-przyklady, .kv2ai-chipy { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
  .kv2ai-przyklady::-webkit-scrollbar, .kv2ai-chipy::-webkit-scrollbar { display: none; }
  .kv2ai-chipy-et, .kv2 a.kv2ai-chip, .kv2ai-przyklad { flex-shrink: 0; }
}