/* xWildChat Mobile Fix — v1 */
@media screen and (max-width: 768px) {
  html {
    height: -webkit-fill-available;
  }
  body {
    height: -webkit-fill-available;
    overflow: hidden;
  }
  #app {
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    overflow: hidden !important;
  }
  #sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 82vw !important;
    max-width: 300px !important;
    min-width: 0 !important;
    transform: translateX(-100%) !important;
    z-index: 100 !important;
    transition: transform .28s ease !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    overflow-y: auto !important;
  }
  #sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 30px rgba(0,0,0,.7) !important;
  }
  #main {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    overflow: hidden !important;
  }
  #topbar {
    padding: 0 10px !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
  }
  #ticker {
    flex-shrink: 0 !important;
  }
  #content {
    flex: 1 1 0% !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    box-sizing: border-box !important;
  }
  .section {
    overflow: hidden !important;
    padding: 0 !important;
  }
  .section.active {
    display: block !important;
    padding: 14px 12px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #section-chat.active {
    position: fixed !important;
    top: 54px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    height: auto !important;
    z-index: 50 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .notif-dropdown {
    width: calc(100vw - 20px) !important;
    right: -48px !important;
    max-height: 70vh !important;
  }
  /* PWA banner safe area */
  #pwa-banner,
  #ios-banner {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}