/* Modern mobile app shell for Streamit frontend */
:root {
  --m-nav-h: 64px;
  --m-header-h: 56px;
  --m-bg: #0b0b0f;
  --m-surface: #14141a;
  --m-border: rgba(255,255,255,.08);
  --m-text: #f5f5f7;
  --m-muted: #9a9aa3;
  --m-accent: var(--bs-primary, #e50914);
}

@media (max-width: 1199.98px) {
  body {
    padding-bottom: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Top bar: compact */
  header .iq-navbar {
    min-height: var(--m-header-h);
    background: rgba(11,11,15,.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--m-border);
  }
  header .landing-header {
    min-height: var(--m-header-h);
    padding-top: .35rem;
    padding-bottom: .35rem;
  }

  /* Hide desktop search on mobile */
  .search-box-container,
  #search-icon-btn,
  .search-input-wrapper {
    display: none !important;
  }

  /* Hide old hamburger that opens horizontal nav if bottom nav exists - keep optional */
  .toggle-rounded-btn {
    display: none !important;
  }

  /* Mobile auth buttons always visible */
  .m-top-auth {
    display: flex !important;
    align-items: center;
    gap: .5rem;
  }
  .m-top-auth .btn {
    padding: .35rem .85rem;
    font-size: .8125rem;
    border-radius: 999px;
    white-space: nowrap;
  }
  .m-top-auth .btn-outline-light {
    border-color: rgba(255,255,255,.25);
    color: #fff;
  }

  /* User avatar compact */
  .dropdown-user-wrapper .dropdown-user {
    padding: 0 !important;
  }
  .dropdown-user-menu {
    min-width: min(92vw, 320px) !important;
    max-height: 75vh;
    overflow-y: auto;
    border-radius: 16px !important;
    border: 1px solid var(--m-border) !important;
    background: var(--m-surface) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.45) !important;
    padding: .75rem !important;
  }
  .dropdown-user-menu .list-inline > li > a {
    display: block;
    padding: .75rem .85rem !important;
    border-radius: 10px;
  }
  .dropdown-user-menu .list-inline > li > a:active,
  .dropdown-user-menu .list-inline > li > a:hover {
    background: rgba(255,255,255,.06);
  }

  /* Bottom navigation */
  .m-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    height: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px));
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom, 0px));
    background: rgba(15,15,20,.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--m-border);
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
  }
  .m-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    color: var(--m-muted);
    text-decoration: none;
    font-size: .68rem;
    line-height: 1.1;
    min-width: 0;
    border-radius: 12px;
    transition: color .15s ease, transform .15s ease;
  }
  .m-bottom-nav__item i {
    font-size: 1.35rem;
    line-height: 1;
  }
  .m-bottom-nav__item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-bottom-nav__item.is-active {
    color: #fff;
  }
  .m-bottom-nav__item.is-active i {
    color: var(--m-accent);
  }
  .m-bottom-nav__item:active {
    transform: scale(.96);
  }

  /* Hide legacy sticky/float menus if any residual */
  .footer-stcky-menu,
  .footer-float-menu {
    display: none !important;
  }

  /* Hide bulky desktop-only panels on small screens */
  .navbar-toggler {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .m-bottom-nav,
  .m-top-auth {
    display: none !important;
  }
}