/* Голос-меню + аудишн-харнесс — фиче-слайс.
   Визуал по канону ui-kit (ui-kit/docs/design-reference.md): «острова на канвасе»,
   радиус острова 20, контролов 8, чипов 6; shadow-island; без теней на элементах списка
   (ховер + 1px верхняя граница). Цвета — ТОЛЬКО через токены (--surface-*, --text*, --border-*).
   Хардкод hex вне :root запрещён (acceptance AC-4.1). */

.vc-scope{
  /* токены, которых нет в базовом :root страницы — доопределяем, НЕ переименовывая общие */
  --vc-radius-island:20px;
  --vc-radius-control:8px;
  --vc-radius-chip:6px;
  --vc-shadow-island:0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --vc-shadow-overlay:0 8px 40px rgba(0,0,0,.55);
}

/* ---------- плавающий остров (Motion UI) ----------
   НЕ модалка: экран не затемняется, Скрепка остаётся видимой и живой справа.
   Панель всплывает в свободной зоне СЛЕВА (аватар/облако — справа), появляется только когда нужна.
   Задел на будущее (Admin): экран = рабочий канвас, Скрепка всегда на нём. */
.vc-overlay{
  position:fixed; left:24px; top:96px; bottom:24px;
  width:min(400px, calc(100vw - 48px));
  z-index:40;
  display:flex; align-items:stretch;
  opacity:0; pointer-events:none;
  transform:translateX(-14px) scale(.985);
  transition:opacity .18s cubic-bezier(.22,1,.36,1), transform .22s cubic-bezier(.22,1,.36,1);
}
.vc-overlay.open{opacity:1; pointer-events:auto; transform:none}
@media (prefers-reduced-motion:reduce){ .vc-overlay{transition:opacity .12s linear; transform:none} }

.vc-panel{
  width:100%; display:flex; flex-direction:column; text-align:left;
  background:color-mix(in srgb, var(--surface-primary) 92%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid var(--border-color);
  border-radius:var(--vc-radius-island);
  box-shadow:var(--vc-shadow-overlay);
  overflow:hidden;
}

.vc-head{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--border-color);
}
.vc-title{font-size:15px; font-weight:650; color:var(--fg); margin:0}
.vc-sub{font-size:11px; color:var(--text-secondary)}
.vc-spacer{flex:1}

.vc-close{
  appearance:none; border:1px solid var(--border-color); background:var(--surface-secondary);
  color:var(--fg); width:30px; height:30px; border-radius:var(--vc-radius-control);
  cursor:pointer; font-size:15px; line-height:1;
}
.vc-close:hover{background:var(--surface-primary)}

/* ---------- табы ---------- */
.vc-tabs{display:flex; gap:4px; padding:12px 20px 0}
.vc-tab{
  appearance:none; background:none; border:0; cursor:pointer;
  padding:8px 12px; border-radius:var(--vc-radius-control);
  font-size:13px; font-weight:600; color:var(--text-secondary);
}
.vc-tab:hover{background:var(--surface-secondary); color:var(--fg)}
.vc-tab[aria-selected="true"]{background:var(--surface-secondary); color:var(--fg)}
.vc-tab .vc-count{opacity:.6; margin-left:6px; font-weight:500}

/* ---------- фильтры ---------- */
.vc-filters{display:flex; gap:8px; flex-wrap:wrap; padding:12px 20px}
.vc-search{
  flex:1 1 240px; min-width:180px;
  padding:9px 12px; border-radius:var(--vc-radius-control);
  border:1px solid var(--border-color); background:var(--surface-secondary);
  color:var(--fg); font-size:13px; outline:none;
}
.vc-search:focus{border-color:var(--text-secondary)}
.vc-search::placeholder{color:var(--text-secondary)}
.vc-select{
  padding:9px 10px; border-radius:var(--vc-radius-control);
  border:1px solid var(--border-color); background:var(--surface-secondary);
  color:var(--fg); font-size:13px; cursor:pointer; outline:none;
}

/* ---------- список ---------- */
.vc-list{flex:1; overflow-y:auto; padding:4px 20px 20px}
.vc-group{margin-top:16px}
.vc-group-title{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-secondary); margin:0 0 6px; padding:0 2px;
}
/* канон: без теней на элементах списка — ховер + 1px верхняя граница */
/* вся строка — кнопка выбора: нажал → выбран (без «подтвердить») */
.vc-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px; border-top:1px solid var(--border-color);
  cursor:pointer; border-radius:var(--vc-radius-control);
  transition:background .1s ease;
}
.vc-item:hover{background:var(--surface-secondary)}
.vc-item:focus-visible{outline:2px solid var(--lime); outline-offset:-2px}
.vc-item[aria-current="true"]{background:var(--surface-secondary)}
.vc-check{
  width:14px; flex-shrink:0; color:var(--lime); font-weight:700; font-size:13px; line-height:1;
}

.vc-item-main{flex:1; min-width:0}
.vc-name{font-size:14px; font-weight:600; color:var(--fg); display:block}
.vc-desc{
  font-size:12px; color:var(--text-secondary);
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vc-badges{display:flex; gap:5px; flex-shrink:0}
.vc-badge{
  font-size:10px; font-weight:600; padding:2px 6px; border-radius:var(--vc-radius-chip);
  background:var(--surface-secondary); color:var(--text-secondary);
  border:1px solid var(--border-color); white-space:nowrap;
}
.vc-badge.ru{color:var(--lime); border-color:var(--lime)}
.vc-badge.own{color:var(--cyan); border-color:var(--cyan)}

.vc-actions{display:flex; gap:6px; flex-shrink:0}
.vc-btn{
  appearance:none; cursor:pointer; font-size:12px; font-weight:600;
  padding:6px 10px; border-radius:var(--vc-radius-control);
  border:1px solid var(--border-color); background:var(--surface-secondary); color:var(--fg);
}
.vc-btn:hover{background:var(--surface-primary)}
.vc-btn:disabled{opacity:.45; cursor:not-allowed}
.vc-btn.primary{background:var(--lime); color:var(--bg); border-color:var(--lime)}
.vc-btn.primary:hover{filter:brightness(1.08)}
.vc-btn.ghost{background:none}

.vc-empty{padding:32px 8px; text-align:center; color:var(--text-secondary); font-size:13px}

/* ---------- аудишн-харнесс (ползунки) ---------- */
.vc-tune{
  border-top:1px solid var(--border-color);
  padding:14px 20px; background:var(--surface-secondary);
  display:flex; flex-direction:column; gap:10px;
}
.vc-tune-row{display:flex; align-items:center; gap:12px}
.vc-tune-label{font-size:12px; font-weight:600; color:var(--text-secondary); width:74px; flex-shrink:0}
.vc-range{flex:1; accent-color:var(--lime); cursor:pointer}
.vc-val{
  font-size:12px; font-variant-numeric:tabular-nums; color:var(--fg);
  width:44px; text-align:right; flex-shrink:0;
}
.vc-tune-foot{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.vc-hint{font-size:11px; color:var(--text-secondary); flex:1; min-width:160px}
.vc-live{font-size:11px; font-weight:600; color:var(--lime)}
.vc-live[data-state="error"]{color:var(--muted)}

@media (max-width:640px){
  .vc-overlay{left:0; right:0; top:auto; bottom:0; width:100%; max-height:78dvh;
              transform:translateY(16px)}
  .vc-overlay.open{transform:none}
  .vc-panel{border-radius:var(--vc-radius-island) var(--vc-radius-island) 0 0;
            border-left:0; border-right:0; border-bottom:0}
  .vc-tune-label{width:60px}
  .vc-desc{display:none}
}