/* Панель демо: сценарии, напоминание, сброс. В настоящем кабинете её нет. */
.demo-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 35;
  width: 292px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  background: #16324f;
  color: #fff;
  box-shadow: 0 24px 50px -24px rgba(22, 50, 79, 0.7);
  animation: pop-in 0.2s ease-out;
}
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; }
.demo-close { display: inline-flex; border: none; background: rgba(255, 255, 255, 0.12); color: #fff; border-radius: 10px; padding: 7px; cursor: pointer; }
.demo-close:hover { background: rgba(255, 255, 255, 0.22); }
.demo-text { margin: 0; font-size: 13px; line-height: 1.5; color: #b9cde0; }
.demo-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8fb0cf; }
.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-chip { border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: #dce8f3; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.demo-chip:hover { border-color: rgba(255, 255, 255, 0.4); }
.demo-chip.is-active { background: #fff; border-color: #fff; color: #16324f; }
.demo-btn { padding: 12px 16px; font-size: 14px; }
.demo-panel .link-center { color: #b9cde0; font-size: 13.5px; }
.demo-panel .link-center:hover { color: #fff; }

.demo-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  background: #16324f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 16px 34px -18px rgba(22, 50, 79, 0.7);
}
.demo-fab:hover { background: #1f4468; }

@media (max-width: 1180px) and (min-width: 861px) {
  .demo-panel { width: 260px; }
}

@media (max-width: 860px) {
  /* На телефоне кнопка живёт в шапке, чтобы не закрывать кнопки кабинета */
  .demo-fab { top: calc(13px + env(safe-area-inset-top)); bottom: auto; right: 68px; padding: 9px 13px; font-size: 13px; box-shadow: none; }
  .demo-panel { left: 10px; right: 10px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Полоска возврата на лендинг. Видна, только когда демо открыто отдельной страницей. */
.backbar {
  --backbar-h: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: #16324f;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.backbar:hover {
  background: #1f4468;
  color: #fff;
  text-decoration: none;
}

.backbar__tag {
  color: #9fc0dd;
  font-weight: 500;
}

body.has-backbar .layout,
body.has-backbar .login {
  min-height: calc(100vh - 38px);
}

@media (max-width: 860px) {
  .backbar {
    padding: 9px 14px;
    font-size: 12.5px;
  }

  .backbar__tag {
    display: none;
  }

  body.has-backbar .layout,
  body.has-backbar .login {
    min-height: calc(100vh - 34px);
  }
}