/* ============================================
   UserBar — единый бар авторизации
   Positive Charge / projecttim.ru экосистема
   Версия: 1.0 (2026-10-29)
   ============================================ */

/* --- Переменные (можно переопределить) --- */
:root {
  --userbar-bg: rgba(0, 0, 0, 0.75);
  --userbar-color: #ffffff;
  --userbar-height: 26px;
  --userbar-radius: 13px;
  --userbar-font-size: 11px;
  --userbar-z-index: 9999;
  --userbar-bottom-offset: 6px;
  /* Высота таббара — подставляется из JS или остаётся 0 */
  --userbar-tabbar-height: 0px;
}

/* --- Контейнер userbar (плашка + бейдж) --- */
#userbar-container {
  position: fixed;
  bottom: calc(var(--userbar-tabbar-height) + env(safe-area-inset-bottom, 0px) + var(--userbar-bottom-offset));
  right: 10px;
  z-index: var(--userbar-z-index);
  display: flex;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

/* --- Развёрнутая плашка --- */
#userbar-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--userbar-height);
  padding: 0 4px 0 10px;
  background: var(--userbar-bg);
  color: var(--userbar-color);
  border-radius: var(--userbar-radius);
  font-size: var(--userbar-font-size);
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

#userbar-bar.userbar-hidden {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

/* --- Иконка пользователя --- */
.userbar-icon {
  font-size: 13px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* --- Email --- */
#userbar-email {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.95;
}

/* --- Кнопка «Выйти» --- */
#userbar-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--userbar-color);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
  padding: 0;
  line-height: 1;
}

#userbar-logout:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* --- Свёрнутый бейдж --- */
#userbar-badge {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--userbar-bg);
  color: var(--userbar-color);
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: opacity 0.3s ease, transform 0.3s ease;
  border: none;
  padding: 0;
}

#userbar-badge.userbar-hidden {
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

/* --- Анимация появления --- */
@keyframes userbar-pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#userbar-container.userbar-animated #userbar-bar:not(.userbar-hidden),
#userbar-container.userbar-animated #userbar-badge:not(.userbar-hidden) {
  animation: userbar-pop-in 0.3s ease;
}

/* --- Тёмный режим (если сайт тёмный) --- */
@media (prefers-color-scheme: dark) {
  :root {
    --userbar-bg: rgba(255, 255, 255, 0.12);
  }
}

/* --- Адаптив для очень узких экранов --- */
@media (max-width: 360px) {
  #userbar-email {
    max-width: 120px;
  }
  #userbar-container {
    right: 6px;
  }
}