/* The search page's AI mode (visual-search spec 2026-10-06 §9.2): the toolbar controls and
   the AI results region. Loaded by pages/list.blade.php only while feature_flag.visual_search
   is on and the grid view is showing, so nothing here can touch the flag-off page.

   Hand-written like every stylesheet here (no Vite). Tokens come from redesign-tokens.css.
   `[hidden]` is restated for every element this file gives a `display`, because a class
   selector's `display` beats the user-agent `[hidden]` rule and the script toggles `hidden`. */

/* — toolbar controls ——————————————————————————————————————————————————— */
.sa-visual-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.sa-visual-controls[hidden],
.sa-visual-photo-chip[hidden],
.sa-visual-error[hidden] { display: none; }
.sa-visual-toggle[aria-pressed="true"] { background: var(--sa-ink); color: #fff; border-color: var(--sa-ink); }
.sa-visual-photo { position: relative; }
/* One focus ring for both controls. The photo button is a <label> around a visually hidden
   file input, so the ring goes on the label while the input has keyboard focus. */
.sa-visual-toggle:focus-visible,
.sa-visual-photo:has(:focus-visible) { outline: 2px solid var(--sa-ink); outline-offset: 2px; }
.sa-visual-photo-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 5px 6px 5px 11px; background: var(--sa-red-100); color: var(--sa-red-800); box-shadow: inset 0 0 0 1px var(--sa-red-200); font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; }
/* Capped on the desktop row so a long filename or error cannot widen the controls enough to
   push the dimension pills onto the next line; phones give both their own line (below). */
.sa-visual-photo-chip__name { max-width: 18ch; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-visual-photo-chip__remove { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.sa-visual-error { flex: 1 1 100%; max-width: 36ch; min-width: 0; margin: 0; color: var(--sa-red-800); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
    /* Their own full-width line under the keyword box, the two buttons sharing it. */
    .sa-visual-controls { flex: 1 1 100%; }
    .sa-visual-controls > .sa-fbtn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 6px; font-size: 14px; }
    .sa-visual-controls > .sa-fbtn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* The chip on its own line: sharing the buttons' line truncated "Describe it" as soon as a
       photo was attached. The name fills the line and ellipsizes, × at the right edge. */
    .sa-visual-photo-chip { flex: 1 1 100%; }
    .sa-visual-photo-chip__name { flex: 1 1 auto; max-width: none; }
    .sa-visual-error { max-width: none; }
}
@media (pointer: coarse), (max-width: 767.98px) {
    /* .sa-fbtn ships min-height 43px, one short of the 44px tap target. */
    .sa-visual-controls > .sa-fbtn { min-height: 44px; }
    .sa-visual-photo-chip__remove { min-width: 44px; min-height: 44px; }
}

/* — results ——————————————————————————————————————————————————————————— */
/* `overflow-wrap: anywhere` on every line that can carry the visitor's words (an unmatched
   place, the unsupported list): one long unbroken token must wrap, not widen the page. */
.sa-visual-notice { min-width: 0; margin: 12px 0; padding: 10px 16px; background: rgba(231, 77, 77, 0.08); color: var(--sa-ink); font-size: 14px; overflow-wrap: anywhere; }
.sa-visual-note, .sa-visual-status { min-width: 0; margin: 8px 0; color: var(--sa-muted); font-size: 13px; overflow-wrap: anywhere; }
.sa-visual-note[hidden], .sa-visual-status[hidden] { display: none; }
.sa-visual-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.sa-visual-chips__label { color: var(--sa-muted); font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sa-visual-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 5px 6px 5px 11px; border: 0; background: var(--sa-red-100); color: var(--sa-red-800); box-shadow: inset 0 0 0 1px var(--sa-red-200); font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; }
.sa-visual-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-visual-chip:hover, .sa-visual-chip:focus-visible { box-shadow: inset 0 0 0 1px var(--sa-red); }
@media (pointer: coarse), (max-width: 767.98px) {
    .sa-visual-chip { min-height: 44px; }
}

/* One grid cell per card: the card stretches, the match line sits under it. */
.sa-visual-item { display: flex; flex-direction: column; min-width: 0; }
.sa-visual-item > .sa-lcard { flex: 1; }
.sa-visual-match { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; box-shadow: inset 0 0 0 1px var(--sa-divider); background: #fff; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; }
.sa-visual-match[hidden] { display: none; }
.sa-visual-match--pending { color: var(--sa-muted); font-weight: 500; }
/* Not var(--sa-ok) (#079455): ~3.9:1 on white at 13px/600, short of 4.5:1. This is ~5.3:1. */
.sa-visual-match--ok { color: #1f7a4d; }
/* The evidence photo is window.renderCdnImage()'s wrapper, which carries the photo's own
   `aspect-ratio` inline (an inline style beats this class), so the box is sized by an explicit
   width AND height: a tall portrait photo then cannot stretch the line, and the 72px box never
   pushes the line past a 375px card. The <img> inside is absolutely positioned and covers it. */
.sa-visual-match__photo { position: relative; flex: none; width: 72px; height: 48px; max-width: 100%; overflow: hidden; }
.sa-visual-match__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-visual-match__text { min-width: 0; overflow-wrap: anywhere; }

/* While the photo checks run, the main grid shows only the cards they confirmed (visual-search.js). */
.sa-results__grid[data-sa-visual-holding] > .sa-visual-item:not([data-sa-visual-confirmed]) { display: none; }

.sa-visual-possible { margin-top: 28px; }
.sa-visual-possible[hidden] { display: none; }
.sa-visual-possible__heading { display: flex; align-items: center; min-height: 44px; margin: 0; font-family: var(--sa-font-display); font-size: 16px; font-weight: 600; letter-spacing: .015em; text-transform: uppercase; overflow-wrap: anywhere; }
.sa-visual-possible > .sa-results__grid { margin-top: 12px; }

.sa-visual-nomatch { margin-top: 28px; }
.sa-visual-nomatch[hidden] { display: none; }
.sa-visual-nomatch > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-family: var(--sa-font-display); font-size: 16px; font-weight: 600; letter-spacing: .015em; text-transform: uppercase; }
.sa-visual-nomatch > .sa-results__grid { margin-top: 12px; }