/* Верхняя панель LDS OS, 32 px (спека 2.2). Слева Signet, словомарк и имя приложения, справа до 4 живых
   элементов. Токены - interfaces/os/tokens.css (6.1-6.5), запасные значения на случай старых токенов. */
.os-bar {
  position: fixed;
  z-index: var(--z-bar, 810);
  top: 0;
  left: 0;
  right: 0;
  height: var(--h-bar, 32px);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bar-glass, rgba(14, 16, 20, .62));
  -webkit-backdrop-filter: var(--bar-blur, blur(20px) saturate(110%));
  backdrop-filter: var(--bar-blur, blur(20px) saturate(110%));
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .09));
  color: var(--tx-2, #b4bac3);
  font: 400 13px/18px var(--font-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}
.os-bar__start,
.os-bar__end {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
}
.os-bar__end { gap: 4px; flex: none; }

.os-bar__signet {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  border-radius: var(--r-ctl, 8px);
  background: transparent;
  color: var(--tx-1, #eef0f3);
  cursor: default;
  transition: color var(--dur-hover, 120ms) var(--ease, ease), background-color var(--dur-hover, 120ms) var(--ease, ease);
}
.os-bar__signet svg { display: block; width: 16px; height: 16px; }
/* Канон Signet: под курсором и при открытом меню глиф холодный */
.os-bar__signet:hover,
.os-bar__signet[aria-expanded="true"] { color: var(--cool, #cfe0ff); }
.os-bar__signet[aria-expanded="true"] { background: var(--fill-hover, rgba(255, 255, 255, .06)); }

.os-bar__wordmark {
  flex: none;
  margin-left: 8px;
  color: var(--tx-1, #eef0f3);
  font-weight: 600;
  white-space: nowrap;
}
.os-bar__app {
  min-width: 0;
  margin-left: 16px;
  overflow: hidden;
  color: var(--tx-2, #b4bac3);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.os-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tx-2, #b4bac3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
  transition: background-color var(--dur-hover, 120ms) var(--ease, ease), color var(--dur-hover, 120ms) var(--ease, ease);
}
.os-bar__item[hidden] { display: none; }
.os-bar__item:hover { background: var(--fill-hover, rgba(255, 255, 255, .06)); color: var(--tx-1, #eef0f3); }
.os-bar__item:active { background: var(--fill-pressed, rgba(255, 255, 255, .14)); }
.os-bar button:focus-visible {
  outline: 2px solid var(--focus-ring, rgba(207, 224, 255, .6));
  outline-offset: 2px;
}

/* Фоновые задачи: спиннер 12 + число */
.os-bar__spin {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--line-strong, rgba(255, 255, 255, .12));
  border-top-color: var(--tx-2, #b4bac3);
  border-radius: 50%;
  animation: os-bar-spin 1s linear infinite;
}
@keyframes os-bar-spin { to { transform: rotate(360deg); } }

/* EDEM: точка 6 + подпись. Зелёная - подключён, серая - выключен или без модели, оранжевая - нет связи */
.os-bar__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--tx-3, #858d98);
}
.os-bar__edem[data-tone="on"] .os-bar__dot { background: var(--ok, #4cc38a); }
.os-bar__edem[data-tone="lost"] .os-bar__dot { background: var(--hot, #ff9d42); }
.os-bar__edem[data-tone="off"],
.os-bar__edem[data-tone="lost"] { color: var(--tx-3, #858d98); }

/* Колокольчик: иконка 16 + бейдж (красный - просрочено, оранжевый - горит) */
.os-bar__bell { position: relative; width: 28px; padding: 0; justify-content: center; }
.os-bar__bell svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.os-bar__badge {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--hot, #ff9d42);
  color: var(--on-hot, #1b1006);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.os-bar__badge[hidden] { display: none; }
.os-bar__badge[data-tone="danger"] { background: var(--danger-fill, #e5484d); color: var(--on-danger, #f4f6f8); }

.os-bar__login { color: var(--tx-1, #eef0f3); background: var(--fill-hover, rgba(255, 255, 255, .06)); }

.os-bar__clock {
  flex: none;
  margin-left: 4px;
  color: var(--tx-2, #b4bac3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.os-bar__clock .dx-clock-short { display: none; }
@media (max-width: 1099px) {
  .os-bar__clock .dx-clock-long { display: none; }
  .os-bar__clock .dx-clock-short { display: inline; }
}
@media (max-width: 720px) {
  .os-bar { padding: 0 8px; gap: 8px; }
  .os-bar__app { display: none; }
  .os-bar__wordmark { font-size: 12px; }
  .os-bar__edem .os-bar__edem-text { display: none; }
}
@media (max-width: 380px) {
  .os-bar__wordmark { display: none; }
}

/* Проверка приложения на обычном рабочем столе (&desk=mac): панели LDS OS нет */
body[data-desk="mac"] .os-bar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .os-bar__spin { animation-duration: 2.4s; }
  .os-bar *, .os-bar { transition: none !important; }
}