/* X Protocol W2 — глобальный хром приложения (узкий экран: нижний таб-бар).
   Loaded after design-w2.css. */

/* Глобальный хром приложения на узком экране: нижний таб-бар.
   Перенесено из файла настроек — правило касается всех экранов (ревью 12.08) */
@media(max-width:500px) {
  .sf-tbar {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    top:auto;
    flex-wrap:nowrap;
    justify-content:center;
    padding:var(--w2-s2) var(--w2-s1) calc(var(--w2-s2) + env(safe-area-inset-bottom));
    gap:0;
    border-top:1px solid rgba(255,255,255,.08);
    z-index:var(--w2-z-chrome);
  }

  .sf-tbar::before {
    display:none
  }

  .sf-logo,.sf-tbar-div,.sf-state,.sf-nav-slider {
    display:none
  }

  .sf-nav {
    gap:0;
    flex-wrap:nowrap;
    width:100%;
    justify-content:space-around;
  }

  .sf-nav-it {
    min-width:0;
    padding:var(--w2-s3) var(--w2-s4);
    gap:0;
    font-size:0;
    letter-spacing:0;
    border-radius:0;
    flex:1;
  }

  .sf-nav-it svg {
    width:31px;
    height:31px
  }

  /* Собственный нижний воздух экрана */
  .screen {
    padding-bottom:var(--w2-s9)
  }

  /* Место под фиксированную панель резервирует ИМЕННО body, а не .screen:
     половина экранов задаёт свой padding шорткатом с ID-специфичностью и
     перебивает правило для .screen — низ страницы уезжал под панель на
     Пульсе, Тренинге, Теле и БАДах (замер 14.08.2026, до 56 px). */
  body {
    padding-bottom:calc(var(--w2-tabbar-h) + env(safe-area-inset-bottom))
  }

  #xp-sync-status {
    top:auto;
    bottom:calc(var(--w2-s8) + var(--w2-s7));
    right:var(--w2-s2)
  }

  /* Плашка пользователя фиксирована и при прокрутке ложится на текст. Даём ей
     подложку-растворение от фона: контент уходит под хром, а не обрывается. */
  .xp-user-widget {
    z-index:var(--w2-z-chrome)
  }

  .xp-user-widget.shown::before {
    content:'';
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:calc(var(--w2-s3) + var(--w2-s8) + var(--w2-s5));
    background:linear-gradient(var(--w2-bg) 42%,rgba(22,24,26,0));
    pointer-events:none;
    z-index:-1
  }

}

/* Виджет пользователя: точка статуса + имя, действия — в выпадающем меню */
.xp-user-widget { position: fixed; top: var(--w2-s3); right: var(--w2-s5); z-index: 9999; display: none; border: 0; background: transparent; padding: 0; }
.xp-user-widget.shown { display: block; }
.xp-uw-trigger {
  display: inline-flex; align-items: center; gap: var(--w2-s2);
  min-height: var(--w2-s8); padding: var(--w2-s2) var(--w2-s3);
  border: 1px solid var(--w2-line); border-radius: 999px;
  background: var(--w2-surface); color: var(--w2-text-muted);
  font: 600 15px/1 'Inter', sans-serif; cursor: pointer;
  transition: border-color 160ms ease-out, background-color 160ms ease-out, color 160ms ease-out, transform 150ms ease-out;
}
.xp-uw-trigger:hover { border-color: rgba(255,255,255,.16); background: var(--w2-surface-raised); color: var(--w2-text); }
.xp-uw-trigger:active { transform: scale(.96); }
.xp-uw-dot { width: var(--w2-s2); height: var(--w2-s2); border-radius: 50%; background: var(--w2-lime); box-shadow: 0 0 6px rgba(200,241,53,.4); }
.xp-uw-chev { width: 14px; height: 14px; opacity: .5; }
.xp-uw-menu {
  position: absolute; top: calc(100% + var(--w2-s2)); right: 0; min-width: 260px;
  padding: var(--w2-s2); border: 1px solid var(--w2-line); border-radius: var(--w2-s4);
  background: var(--w2-surface); box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.xp-uw-menu[hidden] { display: none; }
.xp-uw-item {
  display: flex; align-items: center; gap: var(--w2-s3); width: 100%;
  min-height: var(--w2-s8); padding: var(--w2-s2) var(--w2-s3);
  border: 0; border-radius: var(--w2-s3); background: transparent;
  color: var(--w2-text-muted); font: 500 15px/1.2 'Inter', sans-serif; text-align: left; cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.xp-uw-item:hover { background: var(--w2-surface-raised); color: var(--w2-text); }
.xp-uw-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.xp-uw-sep { height: 1px; margin: var(--w2-s2) var(--w2-s3); background: var(--w2-line); }
body.role-trainee .admin-only { display: none; }

/* Одна подложка и один индикатор: старые правила виджета вырезаны из
   design-w2-common.css (давали второй контур и вторую точку) */
.xp-user-widget .xp-uw-name { color: var(--w2-text); font: 600 15px/1 'Inter', sans-serif; }
.xp-user-widget .xp-uw-name::before { content: none; }

/* Ведение утреннего ритуала — полноэкранный флоу со своим крестиком, как Focus.
   Хром на время прохождения прячем: панель отъедала низ экрана и провоцировала
   случайный выход из ритуала (слово Романа 15.08.2026). Правило живёт здесь, а
   не в файле экрана: глобальный хром — ответственность shell (урок кампании). */
@media (max-width: 900px), (max-height: 500px) {
  body:has(#mr-guided:not([hidden])) :is(.sf-tbar, .xp-user-widget, #xp-sync-status) {
    display: none;
  }

  body:has(#mr-guided:not([hidden])) {
    padding-bottom: 0;
  }
}