/* =====================================================================
   Zilowy — Búsqueda IA (Fase 3): clasificador de imágenes
   Toggle keyword ⇄ IA · búsqueda por imagen · facetas dinámicas ·
   card compacto (swatches + badges) · modal de análisis completo.
   Usa los tokens del design system (cyan/navy). Tema oscuro por defecto.
   ===================================================================== */

/* ------------------------------------------------ barra de búsqueda */
.filters .search-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.filters .search-field #search-box {
    flex: 1 1 220px;
    min-width: 180px;
}

/* Toggle keyword ⇄ IA */
.ai-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-size: var(--z-text-xs, 12px);
    color: var(--text-secondary, #b9c2d0);
    white-space: nowrap;
}
.ai-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ai-toggle-track {
    position: relative;
    width: 34px;
    height: 18px;
    border-radius: var(--z-radius-full, 999px);
    background: var(--border-strong, #33415a);
    transition: background .18s ease;
    flex: 0 0 auto;
}
.ai-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s ease;
}
.ai-toggle input:checked + .ai-toggle-track {
    background: var(--accent, #22d3ee);
}
.ai-toggle input:checked + .ai-toggle-track .ai-toggle-thumb {
    transform: translateX(16px);
}
.ai-toggle input:focus-visible + .ai-toggle-track {
    box-shadow: 0 0 0 3px var(--accent-ring, rgba(34,211,238,.35));
}
.ai-toggle-text {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    letter-spacing: .03em;
}
.ai-toggle input:checked ~ .ai-toggle-text { color: var(--accent, #22d3ee); }

/* Marca visible de que el buscador está en modo IA */
body.ai-search-on #search-box {
    border-color: var(--accent, #22d3ee) !important;
    box-shadow: 0 0 0 2px var(--accent-ring, rgba(34,211,238,.22));
}

/* Botón "Por imagen" + chip del archivo elegido */
.ref-image-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    font-size: var(--z-text-xs, 12px);
    color: var(--text-secondary, #b9c2d0);
    background: var(--btn-secondary-bg, transparent);
    border: 1px solid var(--btn-secondary-border, var(--border-subtle, #2a3550));
    border-radius: var(--z-radius-md, 8px);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}
.ref-image-btn:hover {
    color: var(--accent, #22d3ee);
    border-color: var(--accent, #22d3ee);
}
.ref-image-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    padding: 4px 8px 4px 10px;
    font-size: var(--z-text-xs, 12px);
    color: var(--text-primary, #eef2f8);
    background: var(--accent-soft, rgba(34,211,238,.12));
    border: 1px solid var(--accent, #22d3ee);
    border-radius: var(--z-radius-full, 999px);
    cursor: pointer;
}
.ref-image-chip .ref-image-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.ref-image-chip .ref-image-chip-x { opacity: .7; font-weight: 700; }
.ref-image-chip:hover .ref-image-chip-x { opacity: 1; }

/* ------------------------------------------------ facetas dinámicas */
.search-facets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 10px 0 2px;
}
.search-facets .facet-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}
.facet-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.facet-group-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #7d8aa0);
    margin-right: 2px;
}
.facet-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: var(--z-text-xs, 12px);
    color: var(--text-secondary, #b9c2d0);
    background: var(--bg-elevated, #182137);
    border: 1px solid var(--border-subtle, #2a3550);
    border-radius: var(--z-radius-full, 999px);
    cursor: pointer;
    line-height: 1.4;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.facet-chip:hover {
    border-color: var(--accent, #22d3ee);
    color: var(--text-primary, #eef2f8);
}
.facet-chip.active {
    color: var(--text-on-accent, #06222a);
    background: var(--accent, #22d3ee);
    border-color: var(--accent, #22d3ee);
    font-weight: 600;
}
.facet-chip .facet-count {
    font-size: 10px;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}
.facet-chip.active .facet-count { opacity: .85; }
.facet-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
    flex: 0 0 auto;
}
.facet-clear {
    padding: 3px 10px;
    font-size: var(--z-text-xs, 12px);
    color: var(--text-muted, #7d8aa0);
    background: transparent;
    border: 1px dashed var(--border-subtle, #2a3550);
    border-radius: var(--z-radius-full, 999px);
    cursor: pointer;
}
.facet-clear:hover { color: var(--accent, #22d3ee); border-color: var(--accent, #22d3ee); }
.facet-coverage {
    font-size: 10px;
    color: var(--text-muted, #7d8aa0);
    margin-left: auto;
}

/* ------------------------------------------------ card compacto */
.gallery-item .analysis-chips {
    position: absolute;
    left: 6px;
    bottom: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    pointer-events: none;
    z-index: 2;
}
.gallery-item .an-swatches {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    background: rgba(6, 12, 24, .55);
    border-radius: var(--z-radius-full, 999px);
    backdrop-filter: blur(2px);
}
.an-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: -3px;
    box-shadow: 0 0 0 1.5px rgba(6,12,24,.7);
}
.an-swatch:first-child { margin-left: 0; }
.an-badge {
    font-size: 10px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: var(--z-radius-full, 999px);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: capitalize;
    background: rgba(6, 12, 24, .6);
    color: #dbe4f0;
    backdrop-filter: blur(2px);
}
.an-badge.an-nsfw { color: #fff; }
.an-nsfw-suggestive { background: #b45309; }
.an-nsfw-explicit  { background: #b91c1c; }

/* ------------------------------------------------ modal: análisis completo */
.ai-analysis-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle, #2a3550);
}
.ai-analysis-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: var(--z-text-sm, 13px);
    color: var(--accent, #22d3ee);
}
.ai-analysis-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}
.ai-analysis-list li {
    font-size: var(--z-text-sm, 13px);
    color: var(--text-secondary, #b9c2d0);
    padding: 2px 0;
}
.ai-analysis-list li strong { color: var(--text-primary, #eef2f8); }
.an-chip-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    margin: 6px 0;
}
.an-chip-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #7d8aa0);
    margin-right: 4px;
}
.an-chip {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--z-text-xs, 12px);
    color: var(--text-secondary, #b9c2d0);
    background: var(--bg-elevated, #182137);
    border: 1px solid var(--border-subtle, #2a3550);
    border-radius: var(--z-radius-full, 999px);
}
.an-palette { margin-top: 8px; }
.an-palette-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.an-palette-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 5px;
    background: var(--bg-elevated, #182137);
    border: 1px solid var(--border-subtle, #2a3550);
    border-radius: var(--z-radius-full, 999px);
    font-size: var(--z-text-xs, 12px);
    color: var(--text-secondary, #b9c2d0);
}
.an-palette-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.an-palette-name { text-transform: capitalize; }
.an-palette-pct {
    color: var(--text-muted, #7d8aa0);
    font-variant-numeric: tabular-nums;
}