/* Единый вид статуса модели во всех интерфейсах: AI Hub, чат кабинета, страница
   моделей, публичный статус, админка, быстрое подключение.

   Подписи и правила сюда НЕ дублируются — они приходят из /api/models/state.
   Здесь только внешний вид. Токены берутся из палитры страницы; если страница
   их не объявила, значения ниже подстрахуют (var(--x, fallback)). */

.ms-ind{
  width:10px;height:10px;flex:0 0 10px;border-radius:50%;display:inline-block;
  position:relative;vertical-align:middle;
}
/* Форма отличается у каждого тона — состояние читается без различения цветов. */
.ms-ind[data-tone="ok"]{background:var(--ok,#3BD9A0)}
.ms-ind[data-tone="warn"]{background:transparent;border:2px solid var(--warn,#FFB25C)}
.ms-ind[data-tone="down"]{border-radius:2px;background:var(--bad,#FF6480)}
.ms-ind[data-tone="off"]{border-radius:1px;height:2px;width:11px;flex-basis:11px;background:var(--gray,#5C5346)}
.ms-ind[data-tone="neutral"]{background:transparent;border:2px dotted var(--soft,#7C7061)}
.ms-ind[data-state="checking"]{background:var(--soft,#7C7061);border:0;animation:ms-pulse 1.6s ease-in-out infinite}
@keyframes ms-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ms-ind[data-state="checking"]{animation:none;opacity:.7}
}

/* Компактная плашка состояния для карточек и списков (документация,
   быстрое подключение). Подпись приходит из /api/models/state — здесь
   только внешний вид. */
.ms-chip{
  display:inline-flex;align-items:center;gap:5px;
  height:22px;padding:0 8px;border-radius:999px;
  font-size:11px;font-weight:600;white-space:nowrap;
  border:1px solid var(--line,#2B2118);color:var(--muted,#B2A493);
}
.ms-chip[data-tone="ok"]{color:var(--ok,#3BD9A0);border-color:rgba(59,217,160,.28)}
.ms-chip[data-tone="warn"]{color:var(--warn,#FFC766);border-color:rgba(255,199,102,.28)}
.ms-chip[data-tone="down"]{color:var(--bad,#FF6480);border-color:rgba(255,100,128,.28)}
.ms-chip[data-tone="off"],
.ms-chip[data-tone="neutral"]{color:var(--soft,#7C7061)}

.ms-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  padding:11px 13px;border:0;width:100%;text-align:left;background:transparent;
  color:inherit;font:inherit;cursor:pointer;
  border-bottom:1px solid var(--line2,rgba(255,214,170,.055));
}
.ms-row:last-child{border-bottom:0}
.ms-row[aria-selected="true"]{
  background:rgba(255,138,60,.06);box-shadow:inset 2px 0 0 var(--accent,#FF8A3C);
}
.ms-row[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.ms-row:focus-visible{outline:2px solid var(--amber,#FFB25C);outline-offset:-2px}
.ms-row:hover:not([aria-disabled="true"]){background:rgba(255,214,170,.04)}

.ms-main{min-width:0}
.ms-name{
  font-size:13.5px;font-weight:600;color:var(--cream,#F6EFE4);display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ms-row[aria-disabled="true"] .ms-name{color:var(--muted,#B2A493)}
.ms-meta{
  font-size:11.5px;color:var(--soft,#7C7061);display:flex;gap:7px;align-items:center;
  flex-wrap:wrap;margin-top:2px;
}
.ms-meta b{font-weight:500;color:var(--muted,#B2A493)}
.ms-sep{width:2px;height:2px;border-radius:50%;background:var(--gray,#5C5346);flex:0 0 2px}
.ms-lock{font-size:11px;color:var(--soft,#7C7061);white-space:nowrap}

/* Пилюля коэффициента: на телефоне раскрывается по нажатию, а не по hover. */
.ms-coef{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono,ui-monospace,Consolas,monospace);font-size:11.5px;
  color:var(--amber,#FFB25C);border:1px solid var(--line,rgba(255,214,170,.09));
  border-radius:999px;padding:3px 8px;white-space:nowrap;background:transparent;
  cursor:help;min-height:24px;
}
.ms-coef:focus-visible{outline:2px solid var(--amber,#FFB25C);outline-offset:2px}
.ms-row[aria-disabled="true"] .ms-coef{color:var(--soft,#7C7061)}

.ms-tip{
  position:fixed;z-index:9999;max-width:min(300px,calc(100vw - 32px));
  background:var(--panel2,#1B1713);color:var(--text,#F3ECE1);
  border:1px solid var(--line,rgba(255,214,170,.09));border-radius:10px;
  padding:10px 12px;font-size:12.5px;line-height:1.5;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.ms-tip[hidden]{display:none}

/* Баннеры: устаревшие данные и отвалившаяся модель. */
.ms-banner{
  display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:12px;
  font-size:13px;border:1px solid var(--line,rgba(255,214,170,.09));
  background:var(--panel2,#1B1713);
}
.ms-banner[data-kind="stale"]{border-color:rgba(255,178,92,.3);background:rgba(255,178,92,.05)}
.ms-banner[data-kind="down"]{border-color:rgba(255,100,128,.28);background:rgba(255,100,128,.05)}
.ms-banner b{color:var(--cream,#F6EFE4);font-weight:600;display:block}
.ms-banner p{margin:3px 0 0;color:var(--muted,#B2A493);line-height:1.5}
.ms-draft{
  margin-top:10px;padding:10px 12px;border:1px dashed var(--line,rgba(255,214,170,.09));
  border-radius:9px;font-size:12.5px;color:var(--muted,#B2A493);background:rgba(0,0,0,.2);
  max-height:96px;overflow:auto;white-space:pre-wrap;word-break:break-word;
}
.ms-acts{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.ms-btn{
  font:inherit;font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:9px;
  border:1px solid var(--line,rgba(255,214,170,.09));background:transparent;
  color:var(--text,#F3ECE1);cursor:pointer;min-height:36px;
}
.ms-btn[data-primary]{background:var(--accent,#FF8A3C);border-color:var(--accent,#FF8A3C);color:#1A0E05}
.ms-btn:focus-visible{outline:2px solid var(--amber,#FFB25C);outline-offset:2px}

/* Мобильная нижняя панель выбора модели. */
.ms-sheet-back{
  position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.55);
  display:flex;align-items:flex-end;justify-content:center;
}
.ms-sheet-back[hidden]{display:none}
.ms-sheet{
  width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;
  background:var(--panel,#151210);border:1px solid var(--line,rgba(255,214,170,.09));
  border-radius:16px 16px 0 0;
  animation:ms-up .22s cubic-bezier(.22,.61,.36,1);
}
@keyframes ms-up{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ms-sheet{animation:none}}
.ms-grab{width:34px;height:3px;border-radius:2px;background:var(--gray,#5C5346);margin:9px auto 4px;flex:0 0 auto}
.ms-sheet h3{
  font:inherit;font-size:13px;font-weight:600;margin:6px 14px 10px;
  color:var(--cream,#F6EFE4);flex:0 0 auto;
}
.ms-sheet-list{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}
.ms-sheet .ms-row{padding:13px 14px;min-height:52px}

/* На узких экранах коэффициент уходит под название, чтобы длинное имя модели
   и длинный коэффициент (in ×4.5 / out ×13.5) не ломали строку. */
@media (max-width:400px){
  .ms-row{grid-template-columns:auto 1fr;row-gap:4px}
  .ms-row > .ms-coef,.ms-row > .ms-lock{grid-column:2;justify-self:start}
}

.ms-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
