/* ===============================
   MOBILE BOTTOM NAV
   Hidden by default (desktop/tablet),
   visible only on mobile <= 768px
   =============================== */

.mobile-nav{ display: none; }
.mnav-sheet{ display: none; }
.mnav-sheet.is-open{ display: none; }

@media (max-width: 768px){

  /* ===== MOBILE GLASS NAV BAR ===== */
  .mobile-nav{
    display: flex;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    /* реальная высота */
    height: calc(50px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;

    /* GLASS EFFECT */
    background: rgba(255,255,255,0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);

    border-top: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.10);

    align-items: center;
    justify-content: space-around;

    z-index: 9999;
  }

  /* items */
  .mnav__item{
    flex: 1;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* icons: серые по умолчанию */
  .mnav__item img{
    width: 20px;
    height: 20px;
    display: block;

    /* ключевой фикс обрезания */
    transform: translateY(2px);

    opacity: 0.45;
    transition: opacity .15s ease;
  }

  /* active / pressed */
  .mnav__item:active img,
  .mnav__item.is-active img{
    opacity: 1;
  }

  /* чтобы контент не перекрывался баром */
  body{
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
  }

  /* ===== HIDE DESKTOP FOOTER ON MOBILE ===== */
  .footer,
  footer,
  #footer{
    display: none !important;
  }
  

  /* ===== AI launcher / panel ABOVE mobile nav ===== */
  .aiw-launcher{
    bottom: calc(12px + 50px + env(safe-area-inset-bottom)) !important;
  }

  .aiw{
    bottom: calc(68px + 50px + env(safe-area-inset-bottom)) !important;
  }
  
  /* ===== MOBILE MENU SHEET (GLASS / TYPO / SOCIAL COLORS) ===== */
  .mnav-sheet{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
  }
  .mnav-sheet.is-open{ display: block; }

  /* фон: мягкий, полупрозрачный */
  .mnav-sheet__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.20);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  /* панель: стекло */
  .mnav-sheet__panel{
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(62px + env(safe-area-inset-bottom));

    background: rgba(255,255,255,0.62);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,0.60);
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.22);
    overflow: hidden;
  }

  .mnav-sheet__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }

  /* жирный только заголовок */
  .mnav-sheet__title{
    font-weight: 900;
    font-size: 15px;
    letter-spacing: .2px;
    color: #111;
  }

  /* крестик: компактнее и “мягче” */
  .mnav-sheet__x{
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 22px;
    line-height: 34px;
    cursor: pointer;
    color: #0b5cff; /* спокойный акцент, можно убрать если не надо */
  }

  .mnav-sheet__links{
    padding: 10px 0;
  }

  /* ссылки: НЕ жирные, читаемые */
  .mnav-sheet__link{
    display: block;
    padding: 12px 14px;
    text-decoration: none;

    color: rgba(17,17,17,0.92);
    font-weight: 500;      /* было 600 — делаем обычнее */
    font-size: 16px;
    line-height: 1.25;

    transition: background .12s ease, transform .12s ease;
  }

  .mnav-sheet__link:active{
    background: rgba(0,0,0,0.06);
    transform: translateY(1px);
  }

  .mnav-sheet__divider{
    height: 1px;
    background: rgba(0,0,0,0.10);
    margin: 8px 0;
  }

  /* ---- соцсети цветом (по href, без правок HTML) ---- */
  .mnav-sheet__link[href*="t.me"]{
    color: #1d9bf0; /* Telegram */
    font-weight: 600;
  }

  .mnav-sheet__link[href*="vk.com"]{
    color: #2a65f6; /* VK */
    font-weight: 600;
  }

  .mnav-sheet__link[href*="ok.ru"]{
    color: #f58220; /* OK */
    font-weight: 600;
  }

  .mnav-sheet__link[href^="mailto:"]{
    color: rgba(17,17,17,0.92);
    font-weight: 600;
  }

}