/* =====================================================================
 *  shared/site-kit/site-nav.css — правая часть шапки (site-nav.js)
 * =====================================================================
 *  Круглые кнопки (кот, чат, «9 точек»), профиль с выпадающим меню и
 *  кнопка «Войти» — значения 1:1 с main/menu_public.php и iot/index.php.
 *  Панель «Сервисы RobX» — в apps-menu.css, подключается отдельно.
 * ===================================================================== */
.rx-nav-right { display: flex; align-items: center; gap: 10px; position: relative; }
.rx-icon-btn {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--ink-2); background: #fff; border: none; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px rgba(15,23,42,0.10); padding: 0; font-family: inherit;
  transition: transform .12s, color .14s, box-shadow .14s;
}
.rx-icon-btn svg { width: 21px; height: 21px; }
.rx-icon-btn:hover { color: var(--brand); transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px rgba(37,99,235,.55); }
.rx-icon-btn-active { color: var(--brand); box-shadow: inset 0 0 0 1.5px rgba(37,99,235,.6); }

/* Профиль: аватар + имя + уголок, меню — стеклянная карточка под ним. */
.nav-profile-drop { position: relative; display: inline-flex; align-items: center; }
.nav-profile-btn {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 500; color: var(--ink);
  padding: 4px 12px 4px 5px; height: 44px;
  border-radius: 999px; cursor: pointer; transition: background .14s;
  background: transparent; border: none; white-space: nowrap; font-family: inherit;
}
.nav-profile-btn:hover { background: rgba(15,23,42,0.05); }
.nav-profile-caret { color: var(--ink-3); font-size: 11px; }
.nav-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; box-shadow: 0 6px 16px -6px rgba(40,60,130,0.5);
}
.nav-avatar-fallback {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg,#5b9bff,#2563eb); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 6px 16px -6px rgba(40,60,130,0.5);
}
.nav-avatar-lg { width: 52px; height: 52px; font-size: 18px; }
/* position:absolute через дочерний селектор — иначе `.rx-glass-card`
   { position: relative } из кита перебивает по порядку каскада, меню
   остаётся в потоке и растягивает шапку на всю свою высоту. */
.nav-profile-drop > .nav-profile-menu {
  position: absolute; right: 0; top: calc(100% + 12px);
  width: 308px; z-index: 10000; overflow: hidden; border-radius: 20px;
  animation: rx-apps-in 0.2s cubic-bezier(.2,.8,.25,1.05) both;
}
.nav-pf-hero { display: flex; align-items: center; gap: 13px; padding: 18px 18px 16px; }
.nav-pf-hero .pn { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-pf-hero .pr { font-size: 13px; color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-pf-hr { height: 1px; background: rgba(15,23,42,0.08); margin: 0; }
.nav-pf-list { padding: 6px; }
.nav-profile-menu a {
  display: flex; align-items: center; gap: 14px;
  color: var(--ink); padding: 9px 12px; text-decoration: none; font-size: 15px; font-weight: 600;
  border-radius: 13px; transition: background .12s;
}
.nav-profile-menu a .pfi {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: var(--brand); background: rgba(37,99,235,0.11);
}
.nav-profile-menu a .pfi svg { width: 18px; height: 18px; }
.nav-profile-menu a:hover { background: rgba(37,99,235,.07); }
.nav-profile-menu a.danger { color: #e0294a; }
.nav-profile-menu a.danger .pfi { color: #e0294a; background: rgba(224,41,74,0.1); }
/* Иконки Telegram/MAX в блоке «Учебное приложение» — инлайн-SVG вместо
   FontAwesome: хосты без Vue kit шрифтовых иконок не подключают. */
.rx-feat-app svg { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .nav-profile-name { display: none; }
  .nav-profile-btn { padding: 4px 8px 4px 4px; }
  .rx-nav-right { gap: 6px; }
}