/* Barra filtri della lista e della scheda immobile: stessi comandi, stesso aspetto (list_body.html, detail_filter_bar.html).
   Nello stesso strato delle pagine: deve vincere sulle regole generali di .filters.bar (filters.css). */

@layer pages {
  /* nella lista il campo cerca e basta: distanza e disegno hanno i loro comandi. Il menu resta nascosto perche' list.js ne usa le voci */
  #listSearchModes { display: none; }
  /* Distanza Max misura da un punto: senza un testo nel campo non ha senso, a meno che quella ricerca sia gia' attiva */
  #list-bar:has(input[name="q"]:placeholder-shown) [data-travel-filter]:not(.is-set) { display: none; }
  #list-bar .portal-search-city-chip { display: none; } /* il comune si legge nel testo del campo (list.js) */
  /* X per svuotare il campo: compare solo se c'e' un testo */
  .list-bar .field.search { position: relative; }
  .list-bar .row { flex: 0 1 auto; }
  /* I filtri attivi su una seconda riga, tutta per loro: possono essere tanti (citta', area, Dettagli della Ricerca con l'AI)
     e accanto ai comandi spingevano via «Salva ricerca». Vanno a capo da soli; senza filtri la riga non c'e' */
  .list-bar-in { flex-wrap: wrap; }
  .list-bar .chips { order: 1; flex: 1 1 100%; flex-wrap: wrap; }
  .list-bar .chips:not(:has(.chip)) { display: none; }
  .list-bar .chip { text-decoration: none; }
  /* la X di tipologia e prezzo, come quella dei locali (filters.css): compare quando il filtro e' attivo */
  .filter-clearable { position: relative; display: inline-flex; flex: none; }
  .filter-clearable:has(.select.is-set) .filter-pop-x { display: grid; }
  .filter-clearable:has(.select.is-set) .select { padding-right: 38px; }
  .filter-clearable .select.is-set::picker-icon { display: none; }
  .search-clear { position: absolute; top: 50%; right: 10px; z-index: 2; display: none; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--ground); color: var(--ink); cursor: pointer; translate: 0 -50%; }
  .field.search:has(input[name="q"]:not(:placeholder-shown)) .search-clear { display: grid; }
  /* freccia di invio sempre visibile a destra: non tutti sanno che basta Invio. La X le sta accanto */
  .list-bar .field.search input[name="q"] { padding-right: 46px; }
  .list-bar .field.search:has(input[name="q"]:not(:placeholder-shown)) input[name="q"] { padding-right: 74px; }
  .list-bar .search-clear { right: 44px; }
  .search-go { position: absolute; top: 50%; right: 5px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-ink); cursor: pointer; translate: 0 -50%; transition: background-color var(--dur-fast) var(--ease); }
  .search-go:hover { background: var(--ink); }
  .search-go:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .search-go .icon { width: 16px; height: 16px; }
  /* meno di 2 caratteri: niente da cercare (v2.js) */
  .search-go:disabled { background: var(--line); color: var(--ink-soft); cursor: default; }
  .search-clear:hover { background: var(--ink); color: var(--on-ink); }
  .search-clear:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
  .search-clear .icon { width: 12px; height: 12px; }
  /* il filtro si toglie solo dalla X: il resto della pillola non reagisce */
  .list-bar span.chip { cursor: default; }
  .list-bar span.chip:hover { background: var(--accent-soft); }
  .list-bar .chip a.x { color: inherit; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
  .list-bar .chip a.x:hover { background: var(--ink); color: var(--on-ink); }
  .list-bar .chip a.x:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

  /* ---------- «Cerca con una frase» (components/ai_quick.html, js/ai-quick.js) ---------- */
  /* grigio come gli altri comandi della barra; verde quando c'e' una frase da ritrovare (has-frase, js/ai-quick.js) */
  .list-bar .ai-quick-open { flex: none; --round-bg: var(--tint); --round-fg: var(--ink-soft); }
  .list-bar .ai-quick-open.has-frase { --round-bg: var(--accent-soft); --round-fg: var(--accent); }
  .ai-quick-open .icon { width: 18px; height: 18px; }
  /* card in alto al centro, sopra la lista: la frase si scrive guardando ancora i risultati */
  .ai-quick {
    width: min(640px, calc(100% - 32px));
    max-width: none;
    margin: clamp(56px, 12vh, 120px) auto auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--ground);
    color: var(--ink);
    box-shadow: var(--shadow-menu);

    &::backdrop { background: var(--scrim); }
  }
  .ai-quick-card { display: grid; gap: 14px; padding: clamp(20px, 3vw, 28px); }
  .ai-quick-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .ai-quick-head h2 { display: inline-flex; align-items: center; gap: 10px; font-size: var(--step-lead); }
  .ai-quick-head h2 .icon { width: 20px; height: 20px; color: var(--accent); }
  .ai-quick-lead { color: var(--ink-soft); font-size: var(--step-small); max-width: 60ch; }
  .ai-quick-field { position: relative; display: block; }
  /* campo alto: la x in alto e il microfono in basso hanno spazio tra loro */
  .ai-quick-field textarea { width: 100%; min-height: 150px; padding-right: 64px; resize: none; }
  .ai-quick-mic { position: absolute; right: 12px; bottom: 12px; }
  .ai-quick-clear { position: absolute; right: 12px; top: 12px; }
  .ai-quick-clear[hidden] { display: none; }
  .ai-quick-clear .icon { width: 14px; height: 14px; }
  .ai-quick-mic[hidden] { display: none; }
  .ai-quick-mic .icon { width: 18px; height: 18px; }
  .ai-quick-mic[aria-pressed="true"] { --round-bg: var(--heart); --round-fg: var(--ground); --round-bg-hover: var(--heart); --round-fg-hover: var(--ground); }
  .ai-quick-examples summary { display: inline-flex; align-items: center; gap: 4px; font-size: var(--step-small); font-weight: 600; cursor: pointer; list-style: none; }
  .ai-quick-examples summary::-webkit-details-marker { display: none; }
  .ai-quick-examples summary .icon { width: 14px; height: 14px; transition: rotate var(--dur-fast) var(--ease); }
  .ai-quick-examples[open] summary .icon { rotate: 90deg; }
  .ai-quick-examples ul { display: grid; gap: 2px; max-height: 240px; margin: 8px 0 0; padding: 0; overflow-y: auto; list-style: none; }
  .ai-quick-examples button { width: 100%; padding: 7px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; font-size: var(--step-small); text-align: left; cursor: pointer; }
  .ai-quick-examples button:hover, .ai-quick-examples button:focus-visible { background: var(--tint); }
  .ai-quick-key { padding: 12px 14px; border-radius: var(--r-md); background: var(--tint); font-size: var(--step-small); }
  .ai-quick-key[hidden] { display: none; }
  .ai-quick-status { font-size: var(--step-small); font-weight: 500; }
  .ai-quick-status:empty { display: none; }
  .ai-quick-status.is-error { color: var(--heart); }
  .ai-quick-actions { display: flex; justify-content: flex-end; gap: 8px; }
  @media (prefers-reduced-motion: no-preference) {
    .ai-quick[open] { animation: dialog-pop var(--dur) var(--ease); }
  }
  @media (max-width: 640px) {
    .ai-quick { width: 100%; margin: 0 auto auto; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  }

  /* scheda: sotto la testata, e su telefono non resta ferma in alto come le altre barre fuori dalla lista */
  @media (max-width: 640px) {
    .top + .filters.detail-bar { position: static; }
  }
}