/* Velthar Liquid Glass tab bar — как в Telegram iOS 26.
   Самостоятельный модуль: подключается и к старому base.html, и к v3/base.html.
   Опирается только на переменные --bg2/--text/--accent, которые есть в обоих. */
:root { --tab-h: 58px; --tab-spring: cubic-bezier(.34,1.45,.55,1); }
.vs-tabbar { display: none; }
@media (max-width: 900px) {
  .vs-tabbar {
    position: fixed; left: 10px; right: 10px; bottom: calc(4px + env(safe-area-inset-bottom, 0px) * 0.4);   /* между «над индикатором» и «у самого края», как в Telegram */ z-index: 1050;
    display: flex; align-items: center; gap: 8px; touch-action: none; transition: transform .38s var(--tab-spring), opacity .25s ease; -webkit-user-select: none; user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', system-ui, sans-serif;
    /* iOS Safari иначе не держит fixed-элемент своим слоем: на быстром скролле
       панель на кадр-другой отрисовывается вместе со страницей и «доезжает»
       на место отдельно. will-change без статичного translate3d — только
       намёк на отдельный слой, не «замороженный» кадр: со статичным
       translate3d(0,0,0) панель залипала на старом месте при заходе на
       страницы, где высота контента меняется сразу после загрузки (сворачивание
       адресной строки Safari не пересчитывало положение). */
    will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  }
  body.drawer-open .vs-tabbar { transform: translate3d(0, 140%, 0); opacity: 0; pointer-events: none; }
  .vs-glass {
    position: relative; border-radius: 999px;
    background: color-mix(in srgb, var(--bg2, #151518) 55%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 0 8px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.25), 0 0 0 1px color-mix(in srgb, var(--text, #fff) 8%, transparent);
  }
  .vs-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%); }
  .vs-tabs { flex: 1; display: flex; height: var(--tab-h); padding: 4px; overflow: hidden; }
  .vs-tab {
    position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--text-2, var(--muted, #B7B7BB)); font-size: .62rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; border-radius: 999px;
    transition: color .25s ease, transform .35s var(--tab-spring); -webkit-tap-highlight-color: transparent;
  }
  .vs-tab:hover { color: var(--text-2, var(--muted, #B7B7BB)); text-decoration: none; }
  .vs-tab .bi { font-size: 1.28rem; line-height: 1; transition: transform .35s var(--tab-spring); }
  .vs-tab.active { color: var(--accent, #C2A97A); }
  .vs-tab.near { transform: translateY(-2px); }          /* линза проходит над вкладкой */
  .vs-tab.near .bi { transform: scale(1.14); }
  .vs-tab.pop .bi { animation: vs-pop .45s var(--tab-spring); }
  .vs-tab-ind {
    position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; z-index: 0;
    background: color-mix(in srgb, var(--text, #fff) 11%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    transition: transform .55s var(--tab-spring), width .3s ease, box-shadow .25s ease, background .25s ease;
    will-change: transform;
  }
  .vs-tab-ind.jump { transition: none; }
  .vs-tab-ind.drag { transition: width .15s ease, box-shadow .2s ease, background .2s ease;   /* следует за пальцем без задержки */
    background: color-mix(in srgb, var(--text, #fff) 16%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); }
  .vs-fab { width: var(--tab-h); height: var(--tab-h); flex: 0 0 auto; display: grid; place-items: center; color: var(--text, #fff);
    font-size: 1.3rem; border: none; padding: 0; cursor: pointer; transition: transform .35s var(--tab-spring); }
  .vs-fab:active { transform: scale(.9); }
  @keyframes vs-pop { 0% { transform: scale(.82); } 55% { transform: scale(1.16); } 100% { transform: scale(1); } }
  /* контент под панелью не прячем */
  body.has-tabbar .main-panel main, body.has-tabbar .vs-content { padding-bottom: calc(var(--tab-h) + 34px + env(safe-area-inset-bottom)) !important; }
  body.has-tabbar .mobile-menu-btn { display: none !important; }   /* старая плавающая кнопка меню больше не нужна */
}
body[data-theme="ivory"] .vs-glass, body[data-theme="light"] .vs-glass {
  background: rgba(255,255,255,.62);
  box-shadow: 0 8px 26px rgba(47,42,35,.18), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(0,0,0,.06);
}
body[data-theme="ivory"] .vs-tab-ind, body[data-theme="light"] .vs-tab-ind { background: rgba(0,0,0,.07); }
body[data-theme="ivory"] .vs-tab-ind.drag, body[data-theme="light"] .vs-tab-ind.drag { background: rgba(0,0,0,.11); }

/* бейдж внимания на кнопке меню */
.vs-fab { position: relative; }
.vs-fab-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #FF9F0A; color: #1a1000; font-size: .68rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--bg, #000); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.vs-fab-badge.bad { background: #FF453A; color: #fff; }
.vs-fab-badge[hidden] { display: none; }