/* Вигляд усього, що малює app/auth-ui.js: блок користувача в сайдбарі й
   вікно входу. Окремим файлом, бо цей модуль працює і в каталозі, і на
   маркетингових сторінках — а вони підключають різні набори стилів
   (app.css є лише в каталозі, і блок користувача лишався там без вигляду).
   Сайдбарні дрібниці (згорнутий стан) живуть у sidebar.css. */

/* ================= блок користувача в сайдбарі ================= */
/* Замінює кнопку Sign In, коли є сесія: аватар, ім'я, email і шеврон;
   розкривається виходом, посиланням на свої секції та ключем ліцензії. */
.uib-user-holder {
  /* Обгортка — це кнопка Sign In із href: кліки й наведення пускаємо
     тільки в сам блок користувача, інакше клац по копірайту вів на
     /signin, а курсор ставав «пальцем» над простим текстом. */
  pointer-events: none;
  display: block !important;
  height: auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  cursor: default;
}
.uib-user-holder::after { display: none !important }
.uib-user-holder .uib-user { pointer-events: auto }
/* Картка — це сам рядок. Раніше фон і 8px падінгу були ще й на обгортці,
   і виходила коробка в коробці: зовнішня світла рамка навколо картки. */
.uib-user {
  background: none;
  /* сайдбар центрує вміст своїх кнопок — нам треба ліворуч */
  align-items: stretch !important;
  text-align: left;
  padding: 0;
  font-family: Geist, Inter, sans-serif;
}
.uib-user-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px; border: 0; background: #f4f4f5; cursor: pointer;
  border-radius: 16px; transition: background-color 0.16s ease;
}
.uib-user-row:hover { background: #ececee }
/* Відкрито — шеврон дивиться вгору. */
.uib-user[data-open="1"] .uib-user-chev { transform: rotate(180deg) }
.uib-user-pic {
  width: 40px; height: 40px; border-radius: 999px;   /* grid-ok: коло */
  object-fit: cover; flex: 0 0 40px; display: grid; place-items: center;
  /* Нейтральне коло з ініціалами: колір бренду лишається на тарифі, а не
     на аватарі — так рядок не сперечається з рештою сайдбара. */
  background: #e4e4e7; color: #18181b; font: 600 16px/1 Geist, Inter, sans-serif;
  letter-spacing: 0.01em;
}
.uib-user-who { display: flex; flex-direction: column; min-width: 0; flex: 1; align-items: flex-start; text-align: left }
.uib-user-name { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100% }
.uib-user-who b {
  font-size: 16px; line-height: 20px; color: #0b0b0c; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Тариф біля імені: PRO — бузковий, FREE — сірий. */
.uib-user-plan {
  flex: 0 0 auto; padding: 0 8px; border-radius: 8px;
  background: #f4f4f5; color: #71717a;
  font: 600 12px/16px Geist, Inter, sans-serif; letter-spacing: 0.04em;
}
.uib-user-plan[data-plan="pro"] { background: #eee6ff; color: #582cb4 }
.uib-user-who i {
  font-style: normal; font-size: 14px; line-height: 20px; color: #71717a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Закрито — шеврон дивиться вниз, відкрито — вгору (правило вище).
   Раніше в закритому стані він був повернутий на -90° і показував
   праворуч, тобто не читався як «розкрити». */
.uib-user-chev { color: #71717a; flex: 0 0 16px; transition: transform 0.2s ease }
/* Меню — не в потоці, а карткою над рядком: блок стоїть у самому низу
   сайдбара, і його батьки («for user nav», «for-members») обрізають усе,
   що виходить за їхню фіксовану висоту. Спливання вгору знімає і обрізання,
   і стрибок решти сайдбара. */
.uib-user { position: relative }
.uib-user-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px; background: #fff; border: 1px solid #eeeef0;
  border-radius: 16px; box-shadow: 0 12px 32px rgba(11, 11, 12, 0.12);
  z-index: 20;
}
/* CSS Framer розкладає всі div як flex, тому просто [hidden] не спрацьовує */
.uib-user-menu[hidden] { display: none !important }

/* Рядки меню — усі однакові: іконка 16px, підпис, підсвітка на ховері.
   Так само виглядають і «Sign out», і «I have a License Key»: у меню
   акаунта немає головної дії, тому й виділяти щось кольором нема чого. */
.uib-user-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; height: 40px; padding: 0 8px; box-sizing: border-box;
  border: 0; background: none; border-radius: 8px; cursor: pointer;
  font: 400 14px/20px Geist, Inter, sans-serif;
  color: #0b0b0c; text-align: left; text-decoration: none;
  transition: background-color 0.16s ease;
}
.uib-user-item:hover { background: #f4f4f5 }
.uib-user-item svg { flex: 0 0 16px; color: #52525b }
/* Лічильник непрочитаних (повідомлення від адміна) — праворуч у рядку */
.uib-user-count {
  margin-left: auto; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #eee6ff; color: #582cb4;
  font: 600 12px/16px Geist, Inter, sans-serif; text-align: center;
}
.uib-user-sep { height: 1px; margin: 4px 0; background: #eeeef0 }

/* Розділювач і копірайт — окремим блоком під карткою користувача, а не
   впритул до неї: інакше лінія читалась як частина картки. */
.uib-user-foot {
  cursor: default;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid #eeeef0;
  font: 400 12px/16px Geist, Inter, sans-serif;
  color: #8b8b95; text-align: center;
}

/* Блок «Contact us» (підпис, Support і кнопка X) потрібен лише гостю: у
   того, хто увійшов, Support лежить у меню акаунта, і в сайдбарі від
   цього блока лишався самотній значок X під порожнім заголовком.
   Класи ставить paintAuth — по імені шару, а не по хешу Framer. */
.uib-sidebar.uib-has-user [data-framer-name="for-members"] > [data-framer-name="nav title"],
.uib-sidebar.uib-has-user .uib-contact-row {
  display: none !important;
}

/* Обрізання батьків знімаємо, щоб картка меню була видна повністю: кнопку
   Sign In Framer кладе в кілька обгорток із overflow: hidden / clip. */
.uib-sidebar [data-framer-name="for user nav"],
.uib-sidebar [data-framer-name="for-members"],
.uib-sidebar [data-framer-name="for user nav"] *:has(.uib-user),
.uib-user-holder { overflow: visible !important }

/* Рамка фокусу: свій акцент замість синього системного кільця. */
.uib-user-row:focus-visible,
.uib-user-item:focus-visible {
  outline: 2px solid #cbdffd; outline-offset: 2px;
}
.uib-user-row:focus:not(:focus-visible),
.uib-user-item:focus:not(:focus-visible) { outline: none }

/* ---------- вікно входу ---------- */
.uib-auth-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(384px, calc(100vw - 32px));
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  font-family: Inter, -apple-system, sans-serif;
  animation: uib-auth-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes uib-auth-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.98) }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) }
}
.uib-auth-box h2 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.2px }
/* Розділювач між входом через Google і листом на пошту. */
.uib-auth-or {
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--dim-2); font-size: var(--t-sm); line-height: var(--lh-sm);
}
.uib-auth-or::before, .uib-auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.uib-auth-box input {
  border: 1px solid #e2e4e9;
  border-radius: 12px;
  padding: 12px 16px;
  font: inherit;
  font-size: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.uib-auth-box input:focus {
  outline: none;
  border-color: #7c5cff;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.16);
}
.uib-auth-box button {
  border: 1px solid #e2e4e9;
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}
.uib-auth-box button:hover { background: #f5f7fa; transform: translateY(-1px) }
.uib-auth-box button:active { transform: translateY(0) }
.uib-auth-box .uib-primary { background: #111; color: #fff; border-color: #111; font-weight: 600 }
.uib-auth-box .uib-primary:hover { background: #000 }
.uib-auth-msg { margin: 2px 0 0; font-size: 12px; color: #e0603a }
.uib-auth-msg[data-ok="true"] { color: #2e9e5b }
.uib-auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border-radius: 50% !important;
  line-height: 1;
}