/* Чипсы и теги, включая состояние занятости и чипсы активных фильтров.
   Часть components/buttons.css; порядок частей важен — см. static/README.md. */
.chip-button {
    --btn-scale-press: 0.94; /* compact filters — between icon and text */
    --chip-button-min-height: var(--button-height-unified);
    --chip-button-height: var(--chip-button-min-height);
    --chip-button-padding: 0 var(--button-padding-x-sm);
    --chip-button-border-color: var(--emphasis-action-chip-border);
    --chip-button-border-color-hover: var(--emphasis-action-chip-border-hover);
    --chip-button-bg: var(--theme-surface-base);
    --chip-button-bg-hover: var(--theme-action-secondary-bg-hover);
    --chip-button-color: var(--emphasis-action-chip-color);
    --chip-button-color-hover: var(--emphasis-action-chip-color-hover);
    min-height: var(--chip-button-min-height);
    height: var(--chip-button-height);
    max-width: 100%;
    padding: var(--chip-button-padding);
    border: var(--border-width-base) solid var(--chip-button-border-color);
    border-radius: var(--button-radius-unified);
    background: var(--chip-button-bg);
    color: var(--chip-button-color);
    gap: var(--chip-button-gap, var(--control-gap-base));
    font-size: var(--chip-button-font-size, inherit);
    font-weight: var(--chip-button-font-weight, inherit);
    line-height: var(--chip-button-line-height, 1);
    white-space: nowrap;
    --chip-button-bg-selected: var(--control-selected-bg);
    --chip-button-border-color-selected: var(--control-selected-border);
    --chip-button-color-selected: var(--control-selected-color);
    --chip-button-icon-filter: none;
    --chip-button-icon-filter-hover: var(--icon-filter-brand);
    --chip-button-icon-filter-selected: var(--icon-filter-brand);
    --icon-filter: var(--chip-button-icon-filter);
}

.chip-button--quiet {
    --chip-button-bg: var(--theme-surface-base);
    --chip-button-bg-hover: var(--theme-action-secondary-bg-hover);
    --chip-button-color: var(--emphasis-action-chip-color);
    --chip-button-border-color: var(--theme-border-control);
    --chip-button-border-color-hover: var(--theme-border-control-hover);
}

.chip-button--danger {
    --chip-button-bg: var(--emphasis-action-chip-danger-bg);
    --chip-button-bg-hover: var(--emphasis-action-chip-danger-bg-hover);
    --chip-button-border-color: var(--emphasis-action-chip-danger-border);
    --chip-button-border-color-hover: var(--emphasis-action-chip-danger-border-hover);
    --chip-button-color: var(--emphasis-action-chip-danger-color);
    --chip-button-color-hover: var(--emphasis-action-chip-danger-color-hover);
}

:where(.menu-button, .icon-button, .info-trigger):not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--button-chrome-bg-hover);
    border-color: var(--button-chrome-border-hover);
    color: var(--button-chrome-color-hover);
    --icon-filter: var(--button-icon-filter-hover);
}

/* ── Active / press states ──────────────────────────────────────────── */

/* Press: all buttons snap fast — immediate physical feedback.
   On release, `:active` is removed → base transition (spring 220ms) fires. */
:where(.menu-button, .icon-button, .app-button, .chip-button, .info-trigger):not(:disabled):not([aria-disabled="true"]):active {
    transform: scale(var(--btn-scale-press));
    transition:
        background-color 80ms var(--motion-ease-in),
        border-color     80ms var(--motion-ease-in),
        color            80ms var(--motion-ease-in),
        box-shadow       80ms var(--motion-ease-in),
        opacity          80ms var(--motion-ease-in),
        transform        80ms var(--motion-ease-in);
}

:where(.menu-button, .icon-button, .info-trigger):not(:disabled):not([aria-disabled="true"]):active {
    background: var(--button-chrome-bg-active);
    border-color: var(--button-chrome-border-hover);
    color: var(--button-chrome-color-hover);
    --icon-filter: var(--button-icon-filter-hover);
}

:where(.app-button):not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--app-button-bg-hover);
    border-color: var(--app-button-border-hover);
    color: var(--app-button-color-hover);
    --icon-filter: var(--app-button-icon-filter-hover);
}

:where(.app-button):not(:disabled):not([aria-disabled="true"]):active {
    background: var(--app-button-bg-active);
    border-color: var(--app-button-border-hover);
    color: var(--app-button-color-hover);
    --icon-filter: var(--app-button-icon-filter-hover);
}

.chip-button:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--chip-button-bg-hover);
    border-color: var(--chip-button-border-color-hover, var(--chip-button-border-color));
    color: var(--chip-button-color-hover);
    --icon-filter: var(--chip-button-icon-filter-hover);
}

.chip-button:not(:disabled):not([aria-disabled="true"]):active {
    background: var(--chip-button-bg-hover);
    border-color: var(--chip-button-border-color-hover, var(--chip-button-border-color));
    color: var(--chip-button-color-hover);
    --icon-filter: var(--chip-button-icon-filter-hover);
}

[data-sidebar-combobox-tags] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar-combobox-tag-gap);
}

[data-sidebar-combobox-tag].chip-button {
    --chip-button-min-height: var(--sidebar-combobox-tag-min-height);
    --chip-button-height: var(--sidebar-combobox-tag-min-height);
    --chip-button-padding: var(--sidebar-combobox-tag-padding);
    --chip-button-gap: var(--control-gap-2xs);
    --chip-button-font-size: var(--sidebar-combobox-tag-font-size);
    --chip-remove-bg: var(--sidebar-combobox-tag-remove-bg);
    --chip-remove-color: var(--sidebar-combobox-tag-remove-color);
    --chip-remove-bg-hover: var(--sidebar-combobox-tag-remove-bg-hover);
}

[data-sidebar-combobox-tag][data-selected="true"].chip-button {
    --chip-button-bg: var(--control-selected-bg);
    --chip-button-bg-hover: var(--control-selected-bg-hover);
    --chip-button-border-color: var(--control-selected-border);
    --chip-button-border-color-hover: var(--control-selected-border-hover);
    --chip-button-color: var(--control-selected-color);
    --chip-button-color-hover: var(--control-selected-color-hover);
    --chip-button-icon-filter: var(--icon-filter-brand);
    --chip-button-icon-filter-hover: var(--icon-filter-brand);
    --chip-remove-color: var(--control-selected-color);
    --chip-remove-bg-hover: var(--control-selected-bg-hover);
}

[data-sidebar-combobox-tag][data-selected="true"] .badge,
[data-sidebar-combobox-tag][data-selected="true"] .icon-badge {
    --badge-border: 1px solid var(--control-selected-border);
    --badge-bg: var(--control-selected-bg-hover);
    --badge-color: var(--control-selected-color);
    border-color: var(--control-selected-border);
    background: var(--control-selected-bg-hover);
    color: var(--control-selected-color);
}

[data-sidebar-combobox-tag-remove],
.chip-button__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--chip-remove-size, var(--sidebar-combobox-tag-remove-size, var(--control-icon-button-size-xs)));
    height: var(--chip-remove-size, var(--sidebar-combobox-tag-remove-size, var(--control-icon-button-size-xs)));
    border-radius: var(--chip-remove-radius, var(--radius-round));
    background: var(--chip-remove-bg, transparent);
    color: var(--chip-remove-color, var(--emphasis-action-secondary-color));
    font-size: var(--chip-remove-font-size, var(--type-control-meta-size));
    line-height: 1;
    flex: 0 0 auto;
}

[data-sidebar-combobox-tag-remove] {
    padding: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
}

[data-sidebar-combobox-tag-remove]:hover,
[data-sidebar-combobox-tag-remove]:focus-visible {
    background: var(--chip-remove-bg-hover, var(--sidebar-combobox-tag-remove-bg-hover));
    color: var(--emphasis-action-secondary-color-hover);
}

:where(.menu-button, .icon-button, .info-trigger)[aria-pressed="true"],
:where(.menu-button, .icon-button, .info-trigger)[aria-current]:not([aria-current="false"]),
:where(.menu-button, .icon-button, .info-trigger)[aria-expanded="true"] {
    background: var(--button-chrome-bg-selected, var(--button-chrome-bg-active));
    border-color: var(--button-chrome-border-selected, var(--button-chrome-border-hover));
    color: var(--button-chrome-color-selected, var(--button-chrome-color-hover));
    --icon-filter: var(--button-icon-filter-selected);
}

:where(.app-button)[aria-pressed="true"],
:where(.app-button)[aria-current]:not([aria-current="false"]),
:where(.app-button)[aria-expanded="true"] {
    background: var(--app-button-bg-selected, var(--app-button-bg-active));
    border-color: var(--app-button-border-selected, var(--app-button-border-hover));
    color: var(--app-button-color-selected, var(--app-button-color-hover));
    --icon-filter: var(--app-button-icon-filter-selected);
}

.chip-button[aria-pressed="true"],
.chip-button[aria-current]:not([aria-current="false"]) {
    background: var(--chip-button-bg-selected, var(--chip-button-bg-hover));
    border-color: var(--chip-button-border-color-selected, var(--chip-button-border-color-hover, var(--chip-button-border-color)));
    color: var(--chip-button-color-selected, var(--chip-button-color-hover));
    --icon-filter: var(--chip-button-icon-filter-selected);
}

/* ── Toggled + hover — brand hover signals "can un-toggle" ─────────── */
/* Must come after toggled rules; :not(:disabled) + :hover lifts specificity. */

:where(.menu-button, .icon-button, .info-trigger)[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]):hover,
:where(.menu-button, .icon-button, .info-trigger)[aria-current]:not([aria-current="false"]):not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--button-chrome-bg-selected-hover);
    border-color: var(--button-chrome-border-selected-hover);
    color: var(--button-chrome-color-selected-hover);
}

:where(.app-button)[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]):hover,
:where(.app-button)[aria-current]:not([aria-current="false"]):not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--app-button-bg-selected-hover);
    border-color: var(--app-button-border-selected-hover);
    color: var(--app-button-color-selected-hover);
}

.chip-button[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]):hover,
.chip-button[aria-current]:not([aria-current="false"]):not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--control-selected-bg-hover);
    border-color: var(--control-selected-border-hover);
    color: var(--control-selected-color-hover);
}

:where(.menu-button, .icon-button, .app-button, .chip-button, .info-trigger):focus-visible {
    border-color: var(--border-color-focus);
    box-shadow: var(--state-focus-ring-shadow);
    outline: none;
}

:where(.menu-button, .icon-button, .app-button, .chip-button, .info-trigger):disabled,
:where(.menu-button, .icon-button, .app-button, .chip-button, .info-trigger)[aria-disabled="true"] {
    opacity: var(--state-opacity-disabled);
    pointer-events: none;
    box-shadow: none;
}

/* ── Busy / loading state ──────────────────────────────────────────────── */
/* data-busy is set by JS alongside disabled. The spinner conveys "working",
   so icon-only buttons must not dim — the spinner IS the visual feedback. */

@keyframes btn-ring-spin {
    to { transform: rotate(360deg); }
}

/* Block interaction; transform spring suppressed — no bounce while busy */
:where(.menu-button, .icon-button, .app-button, .chip-button, .info-trigger)[data-busy] {
    pointer-events: none;
    transition: none;
}

/* Icon-only: conic-gradient ring orbits around the button; icon stays (dimmed) */
:where(.icon-button, .info-trigger):not(.menu-button)[data-busy],
:where(.app-button--icon)[data-busy],
:where([data-word-action])[data-busy] {
    overflow: visible;
    opacity: 1 !important;
}

:where(.icon-button, .info-trigger):not(.menu-button)[data-busy]::before,
:where(.app-button--icon)[data-busy]::before,
:where([data-word-action])[data-busy]::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(currentColor 75%, transparent 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2px));
    animation: btn-ring-spin 0.75s linear infinite;
    pointer-events: none;
}

:where(.icon-button, .info-trigger):not(.menu-button)[data-busy] > *,
:where(.app-button--icon)[data-busy] > *,
:where([data-word-action])[data-busy] > * {
    opacity: 0.25;
    pointer-events: none;
}

/* Text / menu / chip buttons: subtle dim + wait cursor conveys loading */
:where(.app-button):not(.app-button--icon)[data-busy],
:where(.menu-button)[data-busy],
.chip-button[data-busy] {
    opacity: 0.5;
    cursor: wait;
}

.search-active-filter-chip {
    --chip-button-gap: var(--control-gap-tight);
    --chip-button-min-height: var(--button-height-sm);
    --chip-button-padding: 0 var(--control-padding-x-compact);
    --chip-button-font-size: var(--font-size-sm);
    --chip-button-bg: var(--theme-surface-base);
    --chip-button-bg-hover: var(--theme-action-secondary-bg-hover);
    --chip-button-border-color: var(--theme-border-subtle);
    --chip-button-border-color-hover: var(--theme-border-surface-item);
    --chip-button-color: var(--theme-text-muted);
    --chip-button-color-hover: var(--theme-text-strong);
    --chip-remove-bg: transparent;
    display: inline-flex;
    align-items: center;
    gap: var(--control-gap-tight);
    width: auto;
    max-width: 100%;
}

.search-active-filter-chip--reset {
    --chip-button-bg: transparent;
    --chip-button-bg-hover: var(--theme-action-secondary-bg-hover);
    --chip-button-border-color: transparent;
    --chip-button-border-color-hover: var(--theme-border-subtle);
    --chip-button-color: var(--theme-text-muted);
    --chip-button-color-hover: var(--theme-text-strong);
}

.search-active-filter-chip__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}