/* Панели и ряды кнопок, алфавитный указатель.
   Часть components/buttons.css; порядок частей важен — см. static/README.md. */
.button-panel,
.button-rail {
    --button-panel-bg: var(--theme-surface-subtle);
    --button-panel-border: var(--theme-border-surface-item);
    --button-panel-padding: var(--control-padding-x-compact);
    --button-panel-gap: var(--control-gap-base);
    --button-panel-gap-x: var(--button-panel-gap, var(--control-gap-base));
    --button-panel-gap-y: var(--button-panel-gap-row, var(--control-gap-2xs));
    --button-panel-shadow: none;
    --button-panel-backdrop: none;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--button-panel-border);
    background: var(--button-panel-bg);
    box-shadow: var(--button-panel-shadow);
    -webkit-backdrop-filter: var(--button-panel-backdrop);
    backdrop-filter: var(--button-panel-backdrop);
}

.button-panel {
    display: flex;
    align-items: center;
    gap: var(--button-panel-gap-y) var(--button-panel-gap-x);
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    padding: var(--button-panel-padding);
    border-radius: var(--control-radius);
}

.button-panel--split {
    justify-content: space-between;
}

.button-panel--split > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.button-panel--split > :last-child {
    margin-inline-start: auto;
}

.button-stack {
    display: grid;
    gap: var(--control-gap-base);
    justify-items: stretch;
    align-items: stretch;
}

.button-panel__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--button-panel-gap-y, var(--control-gap-2xs)) var(--button-panel-gap-x, var(--button-panel-gap, var(--control-gap-base)));
    flex-wrap: wrap;
    margin: 0;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto;
    padding: var(--button-panel-actions-padding, 0);
}

.button-panel__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-panel-status-gap, var(--control-gap-2xs));
    min-height: var(--button-panel-status-min-height, var(--button-height-unified));
    min-width: var(--button-panel-status-min-width, 0);
    padding: var(--button-panel-status-padding, 0 var(--control-padding-x-wide));
    border-radius: var(--button-panel-status-radius, var(--button-radius-unified));
    border: var(--button-panel-status-border, 1px solid var(--theme-border-normal));
    background: var(--button-panel-status-bg, var(--theme-surface-subsection));
    color: var(--button-panel-status-color, var(--theme-text-muted));
    font-size: var(--button-panel-status-font-size, var(--type-caption-size));
    font-weight: var(--button-panel-status-font-weight, 400);
    line-height: var(--button-panel-status-line-height, 1.2);
    letter-spacing: var(--button-panel-status-letter-spacing, 0);
    text-transform: var(--button-panel-status-text-transform, none);
    white-space: var(--button-panel-status-white-space, nowrap);
}

.button-panel__status[hidden] {
    display: none !important;
}

.button-rail {
    display: inline-flex;
    align-items: center;
    gap: var(--control-gap-tight);
    flex-wrap: wrap;
    width: auto;
    max-width: 100%;
    padding: var(--button-panel-padding);
    border-radius: var(--button-rail-radius);
    overflow: visible;
}

.button-rail--compact {
    gap: var(--control-gap-3xs);
    padding: var(--control-padding-2xs);
}

.chip-alphabet {
    width: calc(25% - 6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--control-gap-tight);
    margin: var(--space-1);
    min-height: var(--button-height-unified);
    padding: var(--outline-pill-padding-y) var(--outline-pill-padding-x);
    border: var(--outline-pill-border) solid transparent;
    border-radius: var(--radius-pill);
    background: var(--emphasis-action-basic-bg);
    color: var(--hierarchy-action-color);
    font-family: inherit;
    font-size: var(--outline-pill-font-size);
    line-height: var(--line-height-tight);
    text-align: center;
    text-decoration: none;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    box-sizing: border-box;
    cursor: pointer;
    --chip-alphabet-selected-bg: var(--control-selected-bg);
    --chip-alphabet-selected-border: var(--control-selected-border);
    --chip-alphabet-selected-color: var(--control-selected-color);
    --chip-alphabet-count-selected-bg: var(--control-selected-bg-hover);
    --chip-alphabet-count-selected-color: var(--control-selected-color);
}

.chip-alphabet:not(:disabled):not([aria-disabled="true"]):hover {
    border-color: var(--theme-border-control-hover);
    background: var(--theme-action-secondary-bg-hover);
    color: var(--theme-text-normal);
}

.chip-alphabet:not(:disabled):not([aria-disabled="true"]):active {
    transform: scale(0.94);
}

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

.chip-alphabet:focus-visible {
    border-color: var(--border-color-focus);
    box-shadow: var(--state-focus-ring-shadow);
    outline: none;
}

.chip-label {
    display: inline-flex;
}

.chip-count {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: var(--hover-main-btn-bg-color);
    color: var(--hierarchy-meta-color);
}

.chip-count .chip-token {
    white-space: nowrap;
}

.chip-count .chip-token + .chip-token::before {
    content: "·";
    margin: 0 var(--space-2) 0 var(--space-1);
    color: var(--hierarchy-meta-color);
}

.chip-start {
    width: min(100%, max-content);
    max-width: 100%;
    justify-content: flex-start;
}

.chip-start .chip-count {
    flex-wrap: wrap;
    white-space: normal;
    min-width: 0;
    flex: 1 1 auto;
}

.chip-start .chip-label {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.chip-alphabet[aria-current]:not([aria-current="false"]) {
    border-color: var(--chip-alphabet-selected-border);
    background-color: var(--chip-alphabet-selected-bg);
    color: var(--chip-alphabet-selected-color);
}

.chip-alphabet[aria-current]:not([aria-current="false"]) .chip-count {
    background-color: var(--chip-alphabet-count-selected-bg);
    color: var(--chip-alphabet-count-selected-color);
}

.chip-alphabet[aria-disabled="true"],
.chip-alphabet:disabled {
    opacity: var(--state-opacity-disabled-strong);
    cursor: default;
    pointer-events: none;
}

/* ── Touch devices: suppress sticky hover state ─────────────────────
   On coarse-pointer devices :hover activates on tap and persists until
   the next interaction, giving buttons a "stuck" appearance.
   We reset button hover styles to their resting values; :active (which
   fires correctly on touch) is left untouched.
   ──────────────────────────────────────────────────────────────────── */
@media (hover: none) {
    :where(.menu-button, .icon-button, .info-trigger):not(:disabled):not([aria-disabled="true"]):hover:not(:focus-visible) {
        background: var(--button-chrome-bg);
        border-color: var(--button-chrome-border);
        color: var(--button-chrome-color);
        --icon-filter: var(--button-icon-filter);
    }
    :where(.app-button):not(:disabled):not([aria-disabled="true"]):hover:not(:focus-visible) {
        background: var(--app-button-bg);
        border-color: var(--app-button-border);
        color: var(--app-button-color);
        --icon-filter: var(--app-button-icon-filter);
    }
    .chip-button:not(:disabled):not([aria-disabled="true"]):hover:not(:focus-visible) {
        background: var(--chip-button-bg);
        border-color: var(--chip-button-border-color);
        color: var(--chip-button-color);
        --icon-filter: var(--chip-button-icon-filter);
    }
    .chip-alphabet:not(:disabled):not([aria-disabled="true"]):hover:not(:focus-visible) {
        /* те же значения, что в базовом правиле .chip-alphabet выше */
        border-color: transparent;
        background: var(--emphasis-action-basic-bg);
        color: var(--hierarchy-action-color);
    }
    [data-sidebar-combobox-tag-remove]:hover:not(:focus-visible) {
        background: var(--chip-remove-bg, transparent);
        color: var(--chip-remove-color, var(--emphasis-action-secondary-color));
    }
}