/* =====================================================================
 *  shared/site-kit/apps-menu.css — панель «Сервисы RobX» (кнопка «9 точек»)
 * =====================================================================
 *  Единственный источник стилей поповера. Раньше этот блок был скопирован
 *  в main/index.php, iot/index.php, iot/device.php и menu_public.php —
 *  и расходился: правишь в одном месте, на остальных страницах остаётся
 *  как было (так и приехал баг с меню, уезжавшим за край на телефоне).
 *
 *  Состав панели (плитки, «Учебное приложение», usage-бары) — в
 *  shared/site-kit/apps-menu.js. Здесь только оформление.
 *
 *  Подключение (страница на другом хосте — абсолютным URL):
 *    <link rel="stylesheet" href="/shared/site-kit/apps-menu.css?v=YYYYMMDD">
 * ===================================================================== */

/* ========== Apps menu (9-точек, поповер «Сервисы RobX») ==========
   Liquid-glass карточка с 6 ярлыками-сервисами в сетке 3×2. Каждая
   плитка — стеклянный orb с цветным градиентом (через --orb-bg /
   --orb-shadow на классе .rx-app-tile-{tone}), label и desc. Внизу —
   статусная плашка «Все сервисы синхронизированы» + ссылка
   «Открыть консоль», и progress-bar расхода токенов. ESC + клик
   снаружи закрывают (см. Nav setup в home.js). */
.rx-apps-wrap { position: relative; display: inline-flex; }
/* position:absolute через дочерний селектор — иначе .rx-glass-card { position:relative },
   определённый позже, перекрывает по порядку каскада и меню остаётся в потоке. */
.rx-apps-wrap > .rx-apps-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: -8px;
}
.rx-apps-menu {
  width: 300px;
  padding: 12px;
  border-radius: 18px;
  z-index: 60;
  transform-origin: top right;
  animation: rx-apps-in 0.22s cubic-bezier(.2,.8,.25,1.05) both;
}
@keyframes rx-apps-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.rx-apps-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 10px;
}
.rx-apps-title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.rx-apps-head svg { width: 17px; height: 17px; color: var(--ink-3); }
/* featured "Учебное приложение" (1:1 с lk/menu.php) */
/* Скрытие атрибутом hidden: у .rx-feat есть свой display:flex, а
   браузерное [hidden]{display:none} — стиль UA и проигрывает автору.
   Статические шапки (menu_public.php) прячут блок именно так. */
.rx-apps-menu [hidden] { display: none !important; }
.rx-feat {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 13px;
  background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.12);
}
.rx-feat-head { display: flex; align-items: center; gap: 10px; }
.rx-feat-ic {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #2563eb;
  background: rgba(37,99,235,0.14);
}
.rx-feat-ic svg { width: 20px; height: 20px; }
.rx-feat-tx { flex: 1; min-width: 0; }
.rx-feat-tx b { font-size: 14px; font-weight: 700; display: block; color: var(--ink); line-height: 1.15; }
.rx-feat-tx i { font-size: 11.5px; font-style: normal; color: var(--ink-3); }
.rx-feat-apps { display: flex; gap: 7px; }
.rx-feat-app {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff;
  text-decoration: none; transition: transform 0.12s, filter 0.14s;
}
.rx-feat-app:hover { transform: translateY(-1px); filter: brightness(1.06); }
.rx-feat-app i { font-size: 14px; }
.rx-feat-app.tg  { background: #229ED9; }
.rx-feat-app.max { background: #5b2be0; }
/* usage bars (токены + диск), 1:1 с lk/menu.php */
.rx-usage { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px; }
.rx-usage-row {
  padding: 7px 10px 8px; border-radius: 11px;
  background: rgba(15,23,42,0.035); border: 1px solid rgba(15,23,42,0.05);
}
.rx-usage-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rx-usage-top > svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
.rx-usage-name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); flex: none; }
.rx-usage-count {
  margin-left: auto; overflow: hidden; text-overflow: ellipsis;
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rx-usage-add { font-size: 12px; font-weight: 700; color: var(--brand); text-decoration: none; white-space: nowrap; flex: none; }
.rx-usage-add:hover { text-decoration: underline; }
.rx-usage-track { margin-top: 6px; height: 5px; border-radius: 99px; background: rgba(15,23,42,0.1); overflow: hidden; }
.rx-usage-fill {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), #4338ca);
  transition: width 0.4s cubic-bezier(.4,.8,.3,1);
}
.rx-usage-fill.warn { background: #f59e0b; }
.rx-usage-fill.over { background: #ef4444; }
/* groups + grid tiles (компактные, 1:1 с lk/menu.php) */
.rx-apps-group { padding: 3px 0 0; }
.rx-apps-group-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-3); padding: 6px 4px 6px;
}
.rx-apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rx-app-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px 7px; border-radius: 12px; text-align: center;
  text-decoration: none; color: inherit;
  transition: background 0.13s, transform 0.12s;
}
.rx-app-tile:hover { background: rgba(37,99,235,0.06); transform: translateY(-1px); }
.rx-app-tile-active { background: rgba(37,99,235,0.10); }
.rx-app-orb {
  position: relative; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  color: var(--orb-ink, #2563eb);
  background: var(--orb-bg, rgba(37,99,235,0.12));
}
.rx-app-orb svg { width: 20px; height: 20px; }
.rx-app-tile-blue   { --orb-bg: color-mix(in srgb,#2563eb 15%,#fff); --orb-ink:#2563eb; }
.rx-app-tile-mint   { --orb-bg: color-mix(in srgb,#16a34a 15%,#fff); --orb-ink:#16a34a; }
.rx-app-tile-amber  { --orb-bg: color-mix(in srgb,#f59e0b 15%,#fff); --orb-ink:#f59e0b; }
.rx-app-tile-orange { --orb-bg: color-mix(in srgb,#ea580c 15%,#fff); --orb-ink:#ea580c; }
.rx-app-tile-violet { --orb-bg: color-mix(in srgb,#7c3aed 15%,#fff); --orb-ink:#7c3aed; }
.rx-app-tile-cyan   { --orb-bg: color-mix(in srgb,#0891b2 15%,#fff); --orb-ink:#0891b2; }
.rx-app-label { font-size: 12px; font-weight: 600; color: var(--ink); }

@media (max-width: 600px) {
  /* Поповер на телефоне якорится к ЭКРАНУ, а не к кнопке «9 точек».
     Раньше было right:-4px от кнопки: кнопка стоит не у правого края
     (справа ещё «Войти» / профиль), и меню шириной почти во весь экран
     уезжало за левый край и обрезалось.
     Нюанс: у .rx-nav есть backdrop-filter, из-за которого шапка может
     стать containing block для fixed. Шапка сама во всю ширину, так что
     отступы получаются те же — раскладка одинаковая в обоих случаях. */
  .rx-apps-wrap > .rx-apps-menu {
    position: fixed;
    top: 74px; left: 8px; right: 8px;
    width: auto;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  /* Плотнее: на телефоне ужимаем ВСЮ панель — шапку, блок учебного
     приложения, usage-бары и плитки. Иначе она занимает пол-экрана и
     выглядит рыхлой рядом с компактной десктопной. */
  .rx-apps-menu { padding: 8px; border-radius: 14px; }
  .rx-apps-head { padding: 2px 2px 6px; }
  .rx-apps-title { font-size: 14px; }
  .rx-apps-head svg { width: 15px; height: 15px; }

  .rx-feat { padding: 8px; border-radius: 11px; gap: 6px; }
  .rx-feat-head { gap: 8px; }
  .rx-feat-ic { width: 30px; height: 30px; border-radius: 9px; }
  .rx-feat-ic svg { width: 17px; height: 17px; }
  .rx-feat-tx b { font-size: 13px; }
  .rx-feat-tx i { font-size: 10.5px; }
  .rx-feat-apps { gap: 6px; }
  .rx-feat-app { height: 30px; border-radius: 9px; font-size: 12.5px; gap: 6px; }

  .rx-usage { gap: 5px; margin: 6px 0 0; }
  .rx-usage-row { padding: 6px 9px 7px; border-radius: 10px; }
  .rx-usage-top { gap: 6px; }
  .rx-usage-top > svg { width: 14px; height: 14px; }
  .rx-usage-name { font-size: 12px; }
  .rx-usage-count { font-size: 11px; }
  .rx-usage-add { font-size: 11.5px; }
  .rx-usage-track { margin-top: 5px; height: 4px; }

  .rx-apps-group { padding: 0; }
  .rx-apps-group-label { padding: 7px 4px 2px; font-size: 9.5px; letter-spacing: 0.1em; }
  .rx-apps-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .rx-app-tile { padding: 6px 2px 5px; gap: 4px; border-radius: 10px; }
  .rx-app-orb { width: 34px; height: 34px; border-radius: 10px; }
  .rx-app-orb svg { width: 17px; height: 17px; }
  .rx-app-label { font-size: 10.5px; line-height: 1.2; }
}