/* bday.fm — menu do celular como gaveta lateral (24/09/2026).
   Um breakpoint só (lg = 1024px) para o hambúrguer, a gaveta e o menu de cima.
   Abaixo de 1024px: hambúrguer + gaveta de altura total. De 1024px para cima:
   menu e área da conta no cabeçalho, como no desktop. */

/* ---------- até 1023px: hambúrguer + gaveta ---------- */
@media (max-width: 1023.98px) {
  header > div > nav { display: none !important; }
  #authArea { display: none !important; }
  #menuBtn {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; color: #0F172A; margin-left: 4px;
  }
  #menuBtn:hover { background: #F5F3FF; }
  /* sino do topo (montado pelo auth.js com md:hidden) acompanha o hambúrguer */
  header div:has(> #notifBtnTop) { display: block !important; }

  #mobileMenu {
    display: block !important;
    position: fixed; top: 0; right: 0; bottom: 0; height: 100vh; height: 100dvh;
    width: min(86vw, 360px); max-height: none !important; overflow-y: auto !important;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background: #fff; z-index: 1000; padding: 0 !important;
    box-shadow: -14px 0 44px rgba(15, 23, 42, .18);
    transform: translateX(104%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  #mobileMenu.open { transform: none; }
  #mobileMenu > div {
    padding: 8px 20px 28px !important; border-top: 0 !important; gap: 2px !important;
  }
  #mobileMenu .nav-link {
    display: block; padding: 12px 8px; min-height: 44px; font-size: 16px; font-weight: 600;
    border-radius: 12px; color: #0F172A;
  }
  #mobileMenu .nav-link:hover, #mobileMenu .nav-link:focus-visible { background: #F5F3FF; color: #5B21B6; }
  #mobileMenu .nav-link.hidden { display: none; }

  .bday-drawer-head {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
    height: 64px; padding: 0 12px 0 20px; background: #fff; border-bottom: 1px solid #EEF0F6;
  }
  .bday-drawer-head img { height: 28px; width: auto; }
  .bday-drawer-close {
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid #E7E5FF; background: #fff; color: #0F172A;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .bday-drawer-close:hover { background: #F5F3FF; }
  .bday-drawer-close svg { width: 20px; height: 20px; }

  .bday-backdrop {
    position: fixed; inset: 0; z-index: 999; background: rgba(15, 10, 30, .45);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .bday-backdrop.open { opacity: 1; pointer-events: auto; }
  body.bday-menu-open { overflow: hidden; }

  /* área da conta dentro da gaveta */
  #authAreaMobile {
    margin-top: 10px; padding-top: 12px; border-top: 1px solid #EEF0F6;
    display: flex; flex-direction: column; gap: 2px !important;
  }
  /* visitante: Entrar / Criar conta continuam botões, com respiro */
  #authAreaMobile > a[href="/login"], #authAreaMobile > a[href="/cadastro"] {
    text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; margin-top: 6px;
  }
  /* logado: os "botões" viram itens de lista, como o resto do menu */
  #authAreaMobile > a.btn-secondary:not([href="/login"]), #authAreaMobile > a.btn-primary:not([href="/cadastro"]), #authAreaMobile > #notifBtnMobile {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    text-align: left; justify-content: flex-start; padding: 12px 8px !important; min-height: 44px;
    font-size: 16px; font-weight: 600; color: #0F172A !important; border-radius: 12px;
  }
  #authAreaMobile > a.btn-primary:not([href="/cadastro"]) { color: #5B21B6 !important; }
  #authAreaMobile > a.btn-secondary:not([href="/login"]):hover, #authAreaMobile > #notifBtnMobile:hover { background: #F5F3FF !important; }
  /* visitante sem links de menu visíveis: nada de linha solta em cima dos botões */
  #mobileMenu > div:not(:has(.nav-link:not(.hidden))) #authAreaMobile { border-top: 0; margin-top: 4px; }
  #authAreaMobile > #logoutBtnMobile { padding: 12px 8px; min-height: 44px; font-size: 16px; border-radius: 12px; text-align: left; }
  #authAreaMobile > #logoutBtnMobile:hover { background: #FEF2F2; }
  #authAreaMobile > div:first-child { padding: 6px 8px 10px !important; }
  #authAreaMobile > div:first-child .font-semibold { font-size: 15px; }
  /* "Lives" já está na lista do menu; o repetido da conta some */
  #authAreaMobile > a[href="/lives"] { display: none !important; }
  #notifListMobile { margin: 0 0 6px; }
}

/* ---------- 1024px para cima: cabeçalho de desktop ---------- */
@media (min-width: 1024px) {
  header > div > nav { display: flex !important; }
  #authArea { display: flex !important; }
  #menuBtn, #mobileMenu, .bday-backdrop { display: none !important; }
  header div:has(> #notifBtnTop) { display: none !important; }
  body.bday-menu-open { overflow: auto; }
}

/* janela baixa (celular deitado, teclado aberto): a gaveta rola por dentro e o
   cabeçalho dela fica fixo; nada é cortado */
@media (max-width: 1023.98px) and (max-height: 520px) {
  .bday-drawer-head { height: 52px; }
  #mobileMenu .nav-link, #authAreaMobile > a.btn-secondary:not([href="/login"]), #authAreaMobile > a.btn-primary:not([href="/cadastro"]), #authAreaMobile > #notifBtnMobile { padding-top: 9px; padding-bottom: 9px; min-height: 40px; }
}