/*
 * Select / Dropdown — кастомный примитив с портал-popover'ом.
 *
 * Архитектура:
 *   - Trigger живёт в .input-label обёртке (как input_text) — TL/TR/BL/BR работают одинаково.
 *   - Popover (список + поиск) рендерится в document.body через TS-контроллер
 *     с position: fixed — это escape'ит любые stacking contexts (модалки, таблицы, transform-родители).
 *   - max-height: 95vh + flip up/down если снизу мало места.
 *
 * Surfaces:
 *   - default (без surface mod) — фон bg-input (как у input'а)
 *   - .input-label--panel — фон bg-card (для тёмных панелей настроек)
 */

/* ============ Trigger (button — выглядит как input) ============ */

/* The trigger always carries BOTH .form-control and .select-trigger. forms.css's
   `.form-control { display: block }` has equal specificity, so on any page that
   loads forms.css AFTER select.css the trigger would collapse to block and the
   chevron would stop pushing to the right edge (justify-content dead). Anchor the
   flex layout with a 2-class selector so it wins regardless of stylesheet order. */
.form-control.select-trigger,
.select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.select-trigger:disabled {
    cursor: not-allowed;
}

.select-trigger-value {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-primary);
}

.select-trigger-value[data-placeholder] {
    color: var(--color-text-tertiary);
}

/* Selected option is UNAVAILABLE (cooldown / available===false) → mute the closed-trigger label
   so the user sees at-rest that the picked model can't be used. Muted tone (NOT --color-error,
   which collides with the trigger's .is-error validation state); the hint chip carries the «why». */
.select-trigger.is-option-disabled .select-trigger-value {
    color: var(--color-text-tertiary);
}

/* Hint chip on the trigger («недоступна» / «Через HH:MM:SS»), mirror of .select-option-hint from
   the list. It YIELDS to the model name: high flex-shrink so on a narrow field (e.g. the VideoLab
   input LLM picker, ~256px in a 2-col row) the name keeps its width and the hint ellipsizes first,
   instead of the name collapsing to «Cla…» (owner: the model name must not get squished). Hidden by
   JS (display:none) when the selected option is available → byte-identical ordinary trigger. */
.select-trigger-hint {
    flex: 0 1000 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
    margin-left: 0.4rem;
}

.select-trigger-chev {
    flex-shrink: 0;
    width: 23px;
    height: 23px;
    color: var(--color-text-secondary);
    fill: currentColor;
    transition: transform 0.15s ease;
}

.input-label--sm .select-trigger-chev {
    width: 17px;
    height: 17px;
}

.input-label--select[data-open] .select-trigger-chev {
    transform: rotate(180deg);
    color: var(--color-border-focus);
}

/* Когда дропдаун раскрыт — держим border триггера в "hover/focus" цвете,
   даже если мышка ушла с поля (стандартное поведение классических dropdown'ов). */
.input-label--select[data-open] .select-trigger:not(.is-error):not(.is-warning):not(.is-success) {
    border-color: var(--color-border-focus);
}

/* Тот же принцип для лейб — пока дропдаун открыт, TL подсвечена primary-цветом
   (без is-error/warning/success — у них state-цвет важнее). */
.input-label--select[data-open]:not(.is-error):not(.is-warning):not(.is-success) .input-label-text--tl {
    color: var(--color-text-primary);
}

/* Panel surface — для темных панелей (триггер на bg-card, лейбы тоже).
   Селектор `.input-label.input-label--panel` нужен для специфичности 0,2,0,
   чтобы перебить `.dev-section .input-label` override в design_section.css. */
.input-label.input-label--panel {
    --input-label-surface: var(--color-bg-card);
}

.input-label--panel .select-trigger,
.input-label--panel .form-control,
.input-label--panel .form-select,
.input-label--panel .form-input {
    background: var(--color-bg-card);
}

/* ============ Popover (портален в document.body) ============ */

.select-popover {
    position: fixed;
    /* выше drawer-overlay (9999) и nested modal (10050): селект, открытый
       внутри любого контейнера, обязан плыть поверх него */
    z-index: 10060;
    display: flex;
    flex-direction: column;
    /* 250px floor so rich model rows (coef chip + label + «Тариф …» hint) don't cramp — the hint
       was wrapping below ~250 on the VideoLab LLM picker (owner 2026-06-21). */
    min-width: 250px;
    /* 600px ceiling: rich model popovers (select.ts) grow ~35% wider than the trigger so long
       model names + «Тариф …» hint fit without truncation (owner 2026-06-21). */
    max-width: 600px;
    max-height: 95vh;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-bg-inverse) 45%, transparent);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.select-popover[data-direction="up"] {
    transform: translateY(4px);
}

.select-popover.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============ Search input в шапке popover'а ============ */

.select-popover-search {
    flex-shrink: 0;
    padding: 0.5rem 0.55rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-card);
}

.select-popover-search input {
    width: 100%;
    height: 32px;
    padding: 0 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.85rem;
    outline: none;
}

.select-popover-search input:focus {
    border-color: transparent;
}

/* ============ Список ============ */

.select-popover-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.3rem 0;
    list-style: none;
    margin: 0;
}

.select-popover-list::-webkit-scrollbar {
    width: 8px;
}
.select-popover-list::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}
.select-popover-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-focus);
}

.select-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    color: var(--color-text-primary);
    font-size: 0.88rem;
    line-height: 1.3;
    transition: background 0.08s ease;
}

/* Hover/highlight на НЕвыбранной опции — лёгкий brand-тинт. :not() нужен,
   чтобы это правило не конфликтовало с rules для [data-selected]. */
.select-option:not([data-selected]):hover,
.select-option:not([data-selected])[data-highlight] {
    background: color-mix(in srgb, var(--color-brand-primary) 8%, transparent);
    color: var(--color-text-primary);
}

.select-option[data-selected] {
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
}

/* Hover на УЖЕ выбранной — усиленный brand-тинт (а не пропадание). */
.select-option[data-selected]:hover,
.select-option[data-selected][data-highlight] {
    background: color-mix(in srgb, var(--color-brand-primary) 24%, transparent);
}

.select-option[data-disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Иконка опции (svg слева) */
.select-option-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
    fill: currentColor;
}

.select-option-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-option-hint {
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
    margin-left: 0.4rem;
    /* Keep the hint on ONE line — the label (flex, min-width:0) ellipsizes instead. Without this
       a 2-word hint like «Тариф Plus» wrapped to two lines on narrow rows (owner 2026-06-21). */
    white-space: nowrap;
    flex-shrink: 0;
}

/* Tier-lock upsell hint («Тариф …») → warning (yellow) tone, not the muted default — it is an
   actionable "upgrade" signal, distinct from the greyed «недоступна» route-health hint. */
.select-option-hint--locked,
.select-trigger-hint--locked {
    color: var(--color-warning);
}

/* Чекмарк ✓ справа в опции (selected) — для single и multi одинаково */
.select-option-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-brand-primary);
    fill: currentColor;
    opacity: 0;
}

.select-option[data-selected] .select-option-check {
    opacity: 1;
}

/* ============ Rich option (LLM dropdowns) ============ */
/* Coefficient chip in the LEFT lead slot (icon's place) + provider sub-line bottom-right.
   Additive: only options carrying coef/meta change; plain + icon options stay as-is. */

/* «×2» chip where the icon would sit. FIXED width so «×1» and «×1.5» occupy the same lead
   slot → every label lines up. The empty spacer (options with no coef in a coef-bearing select)
   keeps that exact width so labels never shift. brand-primary tint. */
.select-option-coef {
    flex-shrink: 0;
    width: 28px;
    /* Balance the chip in its lead column: pull it left (less gap to the popover edge) and keep
       a small gap to the label → the chip reads as visually centred. The empty spacer inherits
       these margins, so coef rows and coef-less rows keep identical label alignment. */
    margin-left: -0.4rem;
    margin-right: -0.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.08rem 0.14rem;
    border-radius: 5px;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-brand-primary);
    background: var(--color-brand-primary-15);
}

/* Discount coefficient (< 1, e.g. «×0.5») → green variant. Mirrors the base chip's
   structure (text + 15% bg tint), only swapping brand-primary for success tokens. */
.select-option-coef--discount {
    color: var(--color-success);
    background: var(--color-success-15);
}

.select-option-coef--empty {
    background: none;
    color: transparent;
}

/* Selected model reflected onto the FIELD label frame: coefficient top-right, provider
   bottom-right. NO pill background — they keep the base `.input-label-text` surface bg so they
   CUT the field border the same way the title (TL) does (a brand-tinted chip bg let the border
   line cross through it). Just coloured text. */
.input-label-text--tr.select-field-coef {
    color: var(--color-brand-primary);
    font-weight: 700;
}

/* Discount coefficient (< 1) reflected on the field frame → green text (no bg, same as base). */
.input-label-text--tr.select-field-coef--discount {
    color: var(--color-success);
}

.input-label-text--br.select-field-provider {
    color: var(--color-text-tertiary);
}

/* meta present → 2-line row: label on top, provider bottom-right. */
.select-option--rich {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    align-items: center;
}

.select-option-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.select-option-body .select-option-label {
    flex: 0 0 auto;
}

/* Provider name — muted, bottom-right under the label, never wraps. */
.select-option-meta {
    align-self: flex-end;
    font-size: 0.72rem;
    line-height: 1;
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

/* Multi-select использует ту же правую птичку, что и single — для консистентности UX */

/* ============ Группы (optgroup) ============ */

.select-optgroup {
    padding: 0;
    margin: 0;
}

.select-optgroup-label {
    padding: 0.6rem 0.85rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-tertiary);
}

.select-optgroup + .select-optgroup {
    border-top: 1px solid var(--color-border);
    margin-top: 0.3rem;
    padding-top: 0.3rem;
}

/* ============ Пустое состояние ============ */

.select-popover-empty {
    padding: 1rem 0.85rem;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: 0.83rem;
}