/* ═══════════════════════════════════════════════════════════════
   ЕДИНЫЙ НИЖНИЙ БАР — источник истины для всех страниц.
   Подключать последним, чтобы перебивать локальные инлайн-стили.
   Позиционирование задаёт страница (fixed по умолчанию; на /chat
   бар — часть flex-колонки, там ставится .bottomnav--inflow).
   Переменные с фолбэками: страницы объявляют разные наборы.
═══════════════════════════════════════════════════════════════ */

.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  display:none;justify-content:space-around;align-items:center;
  gap:0;
  max-width:560px;margin:0 auto;
  padding:9px 8px calc(9px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(10,9,18,.6),rgba(8,7,14,.97));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.09);
}
/* вариант для страниц, где бар лежит в потоке (чат):
   он flex-ребёнок колонки — не даём ему сжиматься по ширине */
.bottomnav--inflow{position:static;flex-shrink:0;max-width:none;
  width:100%;align-self:stretch;box-sizing:border-box;
  backdrop-filter:none;-webkit-backdrop-filter:none;}

/* пункт: и <a>, и <div class="nav-item"> */
.bottomnav a,
.bottomnav .nav-item{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;
  cursor:pointer;text-decoration:none;background:none;border:none;font-family:inherit;
  color:#9a96b8;font-size:10px;font-weight:700;line-height:1.2;
  padding:5px 4px;border-radius:12px;
  transition:color .2s;
}
.bottomnav a svg,
.bottomnav .nav-item svg{width:22px;height:22px;flex-shrink:0;}
.bottomnav a.active,
.bottomnav .nav-item.active{color:var(--accent,#6fc9cd);}

/* центральная кнопка «Чат» */
.bottomnav a.center,
.bottomnav .nav-item.center{margin-top:-26px;justify-content:flex-start;}
.bottomnav .nc,
.bottomnav .nav-center-btn{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--purple,#9d7fd6),var(--accent,#6fc9cd));
  box-shadow:0 8px 26px -6px rgba(157,127,214,.55),0 0 0 5px rgba(6,6,10,.9),inset 0 1px 0 rgba(255,255,255,.3);
}
.bottomnav .nc svg,
.bottomnav .nav-center-btn svg{width:26px;height:26px;stroke:#06060a;}
.bottomnav a.center span:last-child,
.bottomnav .nav-item.center span:last-child{color:var(--accent,#6fc9cd);margin-top:2px;}

/* флагман «Матрица» — золотой */
.bottomnav a.matrix,
.bottomnav .nav-item.matrix{color:var(--gold,#f5b942);}
.bottomnav a.matrix .nav-matrix-ic,
.bottomnav .nav-item.matrix .nav-matrix-ic{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-bottom:1px;
  background:linear-gradient(150deg,rgba(245,185,66,.9),#ffe7a0);
  box-shadow:0 4px 16px -3px rgba(245,185,66,.6),inset 0 1px 0 rgba(255,255,255,.6);
  animation:navMatrixGlow 2.6s ease-in-out infinite;
}
.bottomnav a.matrix .nav-matrix-ic svg,
.bottomnav .nav-item.matrix .nav-matrix-ic svg{width:20px;height:20px;stroke:#1a1004;}
.bottomnav a.matrix span:last-child,
.bottomnav .nav-item.matrix span:last-child{color:var(--gold,#f5b942);font-weight:800;}
@keyframes navMatrixGlow{
  0%,100%{box-shadow:0 4px 16px -3px rgba(245,185,66,.5),inset 0 1px 0 rgba(255,255,255,.6)}
  50%    {box-shadow:0 4px 22px -2px rgba(245,185,66,.85),inset 0 1px 0 rgba(255,255,255,.6)}
}

@media(max-width:768px){ .bottomnav{display:flex;} }
@media(max-width:360px){
  .bottomnav a,.bottomnav .nav-item{font-size:9px;padding:5px 2px;}
  .bottomnav a svg,.bottomnav .nav-item svg{width:20px;height:20px;}
}