/* HUD стека (мастер-режим) — плавающий остров, Motion UI.
   Живёт в правом-нижнем свободном углу, не перекрывает Скрепку и не затемняет экран.
   Показывает: кто активен в каскаде + сколько занял КАЖДЫЙ этап последнего хода.
   Цвет — только токены. Радиусы: остров 20, контрол 8, чип 6. */

.hud{
  position:fixed; right:24px; bottom:24px; z-index:35;
  width:min(310px, calc(100vw - 48px));
  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:20px;
  box-shadow:0 8px 40px rgba(0,0,0,.55);
  color:var(--text-secondary);
  font:12px/1.45 -apple-system, Inter, "Segoe UI", Roboto, sans-serif;
  text-align:left; overflow:hidden;
  opacity:0; pointer-events:none; transform:translateY(10px) scale(.985);
  transition:opacity .18s cubic-bezier(.22,1,.36,1), transform .22s cubic-bezier(.22,1,.36,1);
}
.hud.show{opacity:1; pointer-events:auto; transform:none}
@media (prefers-reduced-motion:reduce){ .hud{transition:opacity .12s linear; transform:none} }

.hud-head{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--border-color); cursor:pointer;
}
.hud-title{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary)}
.hud-e2e{
  margin-left:auto; font-size:15px; font-weight:700; color:var(--lime);
  font-variant-numeric:tabular-nums;
}
.hud-e2e small{font-size:10px; font-weight:600; color:var(--text-secondary); margin-left:2px}
.hud-chev{color:var(--text-secondary); font-size:10px}

.hud-body{padding:10px 14px 14px; display:flex; flex-direction:column; gap:9px}
.hud.collapsed .hud-body{display:none}

/* ---- этап: имя, полоса, мс ---- */
.hud-stage{display:flex; align-items:center; gap:8px}
.hud-stage-name{width:74px; flex-shrink:0; color:var(--fg); font-weight:600; font-size:11px}
.hud-bar{
  flex:1; height:6px; border-radius:6px; background:var(--surface-secondary); overflow:hidden;
}
.hud-bar span{
  display:block; height:100%; border-radius:6px; background:var(--lime);
  transition:width .25s cubic-bezier(.22,1,.36,1);
}
/* самый долгий этап хода — вот что оптимизировать */
.hud-stage.slowest .hud-bar span{background:var(--cyan)}
.hud-stage.slowest .hud-ms{color:var(--cyan)}
.hud-ms{
  width:52px; text-align:right; flex-shrink:0;
  font-variant-numeric:tabular-nums; color:var(--fg); font-weight:600; font-size:11px;
}
.hud-prov{font-size:10px; color:var(--text-secondary); margin-left:82px; margin-top:-6px}

/* ---- стек: цепочки фолбэка ---- */
.hud-stack{border-top:1px solid var(--border-color); padding-top:9px; display:flex; flex-direction:column; gap:5px}
.hud-row{display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.hud-key{width:34px; flex-shrink:0; font-size:10px; font-weight:700; color:var(--text-secondary); text-transform:uppercase}
.hud-chip{
  font-size:10px; font-weight:600; padding:2px 6px; border-radius:6px;
  background:var(--surface-secondary); color:var(--text-secondary);
  border:1px solid var(--border-color);
}
/* тот, кто РЕАЛЬНО отработал последний ход */
.hud-chip.active{color:var(--lime); border-color:var(--lime)}
/* запасной в цепочке — приглушён */
.hud-chip.spare{opacity:.5}
.hud-arrow{color:var(--text-secondary); opacity:.5; font-size:9px}

/* ---- переключатель провайдеров (только мастер): чип = ручка ---- */
.hud-chip.pick{cursor:pointer; user-select:none}
.hud-chip.pick:hover,
.hud-chip.pick:focus-visible{opacity:1; border-color:var(--lime); color:var(--lime); outline:none}
/* мастер поставил это звено первым — рамка держится, даже когда ход отработал не он */
.hud-chip.forced{box-shadow:inset 0 0 0 1px var(--lime)}
/* команда ушла, ждём снимок стека от агента */
.hud-chip.busy{opacity:.35; cursor:progress}
.hud-hint{font-size:10px; color:var(--text-secondary); opacity:.7; padding-top:2px}

.hud-empty{color:var(--text-secondary); font-size:11px; padding:2px 0}

@media (max-width:640px){
  .hud{right:12px; left:12px; bottom:12px; width:auto}
  .hud-stage-name{width:60px}
  .hud-prov{margin-left:68px}
}