/*
 * Tag/category picker shared by the admin pages that let a user narrow a
 * retrieval by category: Trace Chat's filter card and the Search Config
 * page's "Test Retrieval" panel. Kept page-agnostic on purpose — pages that
 * need their own sizing scope a rule to their own page class instead of
 * editing these.
 */

.filter-section {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-section__legend {
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text-primary, rgba(17, 24, 39, 0.87));
    margin-bottom: 4px;
}

/* Free-text filter field and its Add button on one line. */
.filter-section__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Matches the input whatever class the host page gives it — the chat card uses
   .filter-section__input, the doc picker dialog .dp-filter-input. */
.filter-section__row > input {
    flex: 1;
    min-width: 0;
}

/* The button carries central-ui's `app-btn app-btn-secondary`; this only trims
   it down so it lines up with the input rather than towering over it. Scoped
   with .dlg-page as well, to outweigh the blanket `.dlg-page button` in
   dialogue.css on pages that load it. */
.dlg-page .filter-section__add,
.filter-section__add {
    flex-shrink: 0;
    align-self: stretch;
    padding: 0 14px;
    font-size: 13px;
    line-height: 20px;
    /* dialogue.css would otherwise pull the radius back to its own 6px inside
       .dlg-page, so the button would differ from the one in the doc picker. */
    border-radius: 8px;
}

.filter-section__input::placeholder {
    color: var(--app-text-placeholder, rgba(17, 24, 39, 0.35));
}

.filter-section__input:focus {
    outline: 2px solid var(--app-focus-ring, rgba(20, 27, 155, 0.6));
    outline-offset: -2px;
}

/* Tag/category groups lay their choices out on a row that wraps, rather than
 * stacking. Only the tag fieldsets carry `data-tag-group`, so the Custom Filter
 * fieldset (legend + chips + input) keeps the column stack above. */
.filter-section[data-tag-group] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
}

.filter-section__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}