/* Плашка «Демо» — в палитре сервиса (шалфей, бежевый), поверх любой части. */
.demo-pill {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 2147483000;
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px 10px 13px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: #8FAA8C; color: #fff; box-shadow: 0 8px 24px rgba(70, 90, 60, .32);
  font: 700 14px/1 'Montserrat', system-ui, sans-serif; letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent; transition: transform .15s, background .15s;
}
.demo-pill:hover { background: #7F9C7C; }
.demo-pill:active { transform: scale(.96); }
.demo-pill i { font-size: 15px; }
.demo-pill.is-open { background: #2B2420; }

/* Панели на компьютере: плашка в боковом меню над «Выйти», чтобы не закрывать кнопки в таблицах и чате */
@media (min-width: 901px) {
  .demo-pill[data-app="psych"], .demo-pill[data-app="admin"] { left: 18px; right: auto; bottom: 74px; }
  .demo-pill[data-app="psych"] ~ .demo-sheet, .demo-sheet:has(+ .demo-pill[data-app="psych"]),
  .demo-sheet:has(+ .demo-pill[data-app="admin"]) { left: 18px; right: auto; bottom: 128px; }
}

/* Над нижней навигацией сайта и Mini App на телефоне */
@media (max-width: 768px) {
  .demo-pill[data-app="site"], .demo-pill[data-app="tma"] { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 12px; }
  .demo-pill[data-app="psych"], .demo-pill[data-app="admin"] { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 12px; }
}

.demo-sheet {
  position: fixed; right: 18px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); z-index: 2147483001;
  width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 120px); overflow: auto;
  background: #FFFCF6; color: #2B2420; border: 1px solid #E8DDC8; border-radius: 22px;
  box-shadow: 0 18px 50px rgba(60, 45, 25, .22); padding: 16px 14px 12px;
  font: 400 14px/1.45 'Montserrat', system-ui, sans-serif; animation: demo-in .18s ease-out;
}
.demo-sheet[hidden] { display: none; }
@media (max-width: 768px) {
  .demo-sheet { right: 12px; bottom: calc(138px + env(safe-area-inset-bottom, 0px)); }
}
.demo-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 6px; }
.demo-sheet__head b { font-size: 15px; font-weight: 800; }
.demo-x { border: 0; background: #F2EADB; color: #6E655A; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.demo-sheet__text { margin: 0 4px 10px; color: #6E655A; font-size: 13px; }
.demo-link {
  display: flex; gap: 12px; align-items: center; padding: 10px 10px; border-radius: 14px;
  color: inherit; text-decoration: none; transition: background .12s;
}
.demo-link:hover { background: #F5EDDC; }
.demo-link i { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: #E3EDDF; color: #5F7E5C; font-size: 17px; }
.demo-link span { display: flex; flex-direction: column; min-width: 0; }
.demo-link b { font-weight: 700; font-size: 14px; }
.demo-link small { color: #8A7F72; font-size: 12px; }
.demo-reset {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: calc(100% - 8px); margin: 8px 4px 4px;
  border: 1px dashed #D9CDB6; background: transparent; color: #6E655A; border-radius: 999px; padding: 10px; cursor: pointer;
  font: 600 13px/1 'Montserrat', system-ui, sans-serif;
}
.demo-reset:hover { background: #F5EDDC; }
.demo-sheet__foot { text-align: center; color: #8A7F72; font-size: 12px; padding: 8px 4px 2px; }
.demo-sheet__foot a { color: #6F8E6C; }
@keyframes demo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Пока панель проверяет демо-вход — без мигания экрана входа */
html.demo-checking body > *:not(.demo-pill):not(.demo-sheet) { visibility: hidden; }
html.demo-checking body::after {
  content: ''; position: fixed; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 3px solid #D9E3D5; border-top-color: #8FAA8C; border-radius: 50%; animation: demo-spin .8s linear infinite;
}
@keyframes demo-spin { to { transform: rotate(360deg); } }

/* Кнопка «Войти в демо» на экранах входа панелей */
.demo-login-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px;
  border: 0; border-radius: 12px; padding: 13px; cursor: pointer; background: #2B2420; color: #fff;
  font: 700 14px/1 'Montserrat', system-ui, sans-serif;
}
.demo-login-note { margin: 10px 0 0; text-align: center; color: #8A7F72; font: 400 12px/1.4 'Montserrat', system-ui, sans-serif; }