/* BuddySocial v10.78 - mobile menu/chat polish
   Layout/spacing/shape only. Existing color palette is intentionally preserved.
   Applies only to mobile/tablet/PWA <=1100px. */

@media (max-width:1100px){
  /* Main mobile menu: tighter geometry, cleaner grid, no palette changes. */
  body .retro-nav .retro-navin{
    padding:7px !important;
  }

  body .retro-nav .nav-toggle{
    min-height:46px !important;
    padding:0 13px !important;
    border-radius:9px !important;
    font-size:16px !important;
    line-height:1.1 !important;
  }

  body .retro-nav #main-nav-links{
    margin-top:6px !important;
    padding:7px !important;
    border-radius:10px !important;
    max-height:min(68dvh,610px) !important;
    scrollbar-gutter:stable !important;
  }

  body .retro-nav #main-nav-links .nav-primary,
  body .retro-nav #main-nav-links .nav-utilities{
    gap:6px !important;
    margin-bottom:7px !important;
  }

  body .retro-nav #main-nav-links .mobile-nav-section-title{
    min-height:30px !important;
    padding:0 9px !important;
    border-radius:7px !important;
  }

  body .retro-nav #main-nav-links .nav-primary > a,
  body .retro-nav #main-nav-links .nav-utilities > a.utility-link,
  body .retro-nav #main-nav-links .notification-nav-wrap > a.utility-link,
  body .retro-nav #main-nav-links .nav-more > summary,
  body .retro-nav #main-nav-links .nav-more-menu > a,
  body .retro-nav #main-nav-links .mobile-menu-account-actions > a,
  body .retro-nav #main-nav-links .nav-status-control,
  body .retro-nav #main-nav-links .nav-sound-toggle{
    min-height:40px !important;
    padding:7px 9px !important;
    gap:6px !important;
    border-radius:7px !important;
    line-height:1.15 !important;
  }

  body .retro-nav #main-nav-links .menu-icon-buddy{
    flex:0 0 24px !important;
    width:24px !important;
    min-width:24px !important;
    text-align:center !important;
    font-size:16px !important;
    line-height:1 !important;
  }

  body .retro-nav #main-nav-links .nav-more-menu,
  body .retro-nav #main-nav-links .mobile-menu-account-actions{
    gap:6px !important;
    margin-top:6px !important;
    padding:6px !important;
    border-radius:8px !important;
  }

  /* Guest menu follows the exact same spacing/shape language. */
  body.guest-body .retro-nav .retro-navin{
    padding:7px !important;
  }

  body.guest-body .retro-nav .nav-toggle{
    min-height:46px !important;
    padding:0 13px !important;
    border-radius:9px !important;
    font-size:16px !important;
  }

  body.guest-body .retro-nav #main-nav-links{
    margin-top:6px !important;
    padding:7px !important;
    border-radius:10px !important;
    max-height:min(68dvh,610px) !important;
  }

  body.guest-body .retro-nav #main-nav-links > a{
    min-height:40px !important;
    margin-bottom:5px !important;
    padding:7px 10px !important;
    border-radius:7px !important;
    line-height:1.15 !important;
  }

  /* Bottom navigation: slimmer, tidier and easier to tap; palette stays inherited. */
  body{
    padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important;
  }

  .mobilebar,
  .guest-mobilebar{
    min-height:64px !important;
    align-items:stretch !important;
  }

  .mobilebar > a,
  .guest-mobilebar > a{
    min-height:64px !important;
    padding:6px 3px 5px !important;
    gap:3px !important;
  }

  .mobilebar-icon{
    width:28px !important;
    height:26px !important;
    font-size:20px !important;
    line-height:26px !important;
  }

  .mobilebar-label{
    font-size:11.5px !important;
    line-height:1 !important;
    font-weight:800 !important;
  }

  .mobilebar > a.active::before{
    left:24% !important;
    right:24% !important;
    height:2px !important;
  }

  /* Mobile chat button/list: compact floating panel above the bottom bar. */
  #friend-chat.friend-chat{
    position:fixed !important;
    right:8px !important;
    bottom:calc(70px + env(safe-area-inset-bottom,0px)) !important;
    width:min(350px,calc(100vw - 16px)) !important;
    max-width:calc(100vw - 16px) !important;
    border-radius:12px !important;
    overflow:hidden !important;
    z-index:9997 !important;
  }

  #friend-chat.friend-chat.is-collapsed{
    width:auto !important;
    min-width:132px !important;
    max-width:180px !important;
  }

  #friend-chat .friend-chat-head{
    min-width:0 !important;
  }

  #friend-chat .friend-chat-toggle{
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    padding:8px 11px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    border-radius:0 !important;
  }

  #friend-chat .friend-chat-toggle::before{
    content:'💬' !important;
    flex:0 0 auto !important;
    font-size:18px !important;
    line-height:1 !important;
  }

  #friend-chat .friend-chat-toggle b{
    flex:0 1 auto !important;
    font-size:13px !important;
    line-height:1 !important;
  }

  #friend-chat .chat-online-count,
  #friend-chat .chat-unread-badge{
    flex:0 0 auto !important;
    min-width:24px !important;
    text-align:center !important;
    padding:2px 6px !important;
  }

  #friend-chat .chat-chevron{
    margin-left:auto !important;
    flex:0 0 auto !important;
    font-size:11px !important;
  }

  #friend-chat .friend-chat-body{
    max-height:min(62dvh,520px) !important;
    overflow:hidden !important;
  }

  #friend-chat .chat-friend-list{
    max-height:min(42dvh,350px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* Open conversation on mobile: keep header/actions compact and input usable. */
  body.mobile-chat-open .friend-chat-window,
  .friend-chat-window{
    max-width:100vw !important;
  }

  .friend-chat-window > header{
    min-height:44px !important;
    padding:6px 8px !important;
  }

  .friend-chat-window .chat-head-actions{
    gap:4px !important;
    flex-wrap:nowrap !important;
  }

  .friend-chat-window .chat-head-actions button,
  .friend-chat-window .chat-call-btn,
  .friend-chat-window .chat-buzz-btn,
  .friend-chat-window .chat-e2e-btn,
  .friend-chat-window .chat-close{
    min-width:32px !important;
    height:32px !important;
    border-radius:8px !important;
    padding:0 7px !important;
  }

  .friend-chat-window .chat-buzz-btn{
    min-width:38px !important;
  }

  .friend-chat-window .chat-share-tools{
    gap:5px !important;
    padding:6px !important;
  }

  .friend-chat-window .chat-send-form{
    padding:7px !important;
  }

  .friend-chat-window .chat-compose-row{
    gap:6px !important;
  }

  .friend-chat-window .chat-text-input,
  .friend-chat-window .chat-send-form input{
    min-height:40px !important;
    font-size:16px !important; /* prevents iOS zoom */
  }

  .friend-chat-window .chat-send-btn,
  .friend-chat-window .chat-send-form button{
    min-height:40px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
}

@media (max-width:600px){
  body .retro-nav #main-nav-links .nav-primary,
  body .retro-nav #main-nav-links .nav-utilities,
  body .retro-nav #main-nav-links .nav-more-menu,
  body .retro-nav #main-nav-links .mobile-menu-account-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #friend-chat.friend-chat{
    right:6px !important;
    bottom:calc(68px + env(safe-area-inset-bottom,0px)) !important;
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
  }

  #friend-chat.friend-chat.is-collapsed{
    width:auto !important;
    min-width:126px !important;
    max-width:165px !important;
  }

  .friend-chat-window .chat-share-tools{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

@media (max-width:390px){
  body .retro-nav #main-nav-links{
    padding:6px !important;
  }

  body .retro-nav #main-nav-links .nav-primary,
  body .retro-nav #main-nav-links .nav-utilities{
    gap:5px !important;
  }

  body .retro-nav #main-nav-links .nav-primary > a,
  body .retro-nav #main-nav-links .nav-utilities > a.utility-link,
  body .retro-nav #main-nav-links .notification-nav-wrap > a.utility-link,
  body .retro-nav #main-nav-links .nav-more > summary,
  body .retro-nav #main-nav-links .nav-more-menu > a,
  body .retro-nav #main-nav-links .mobile-menu-account-actions > a{
    min-height:38px !important;
    padding:6px 7px !important;
    font-size:12px !important;
  }

  .mobilebar-label{
    font-size:10.5px !important;
  }

  #friend-chat .friend-chat-toggle{
    min-height:42px !important;
    padding:7px 9px !important;
  }

  .friend-chat-window .chat-share-tools{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (display-mode:standalone) and (max-width:1100px){
  #friend-chat.friend-chat{
    bottom:calc(70px + env(safe-area-inset-bottom,0px)) !important;
  }
}

@media (min-width:1101px){
  /* Explicitly no desktop changes. */
}