/* ===== Phone header = desktop-style header (no hamburger) =====
   Row 1: brand + all action buttons.  Row 2: the full nav bar, always visible. */
@media(max-width:900px){
  .mobile-menu-btn,#mobileMenuBtn{display:none!important}
  .mobile-nav-drawer{display:none!important}

  .couplina-header .header-shell,.header-shell{
    height:auto!important;min-height:0;width:calc(100% - 12px);max-width:100%;
    flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:2px 6px;padding:6px 0 4px;box-sizing:border-box;
  }
  .header-brand-area{flex:1 1 auto;min-width:0}
  .header-brand-area .brand{min-width:0;gap:6px}
  .brand-copy small{display:none}

  .header-actions{flex:0 0 auto;gap:3px;margin:0}
  .header-actions .header-icon-btn,
  .header-actions .header-icon-btn:first-of-type,
  .header-icon-btn#chatBtn,.header-icon-btn#searchBtn{display:grid!important}
  .header-actions .header-icon-btn{width:33px;height:33px}
  .header-actions .header-icon-btn>svg{width:18px;height:18px}
  .header-actions .profile-btn{width:35px;height:35px;padding:2px}
  .header-actions .profile-btn .profile-avatar{width:29px;height:29px}
  .profile-copy,.profile-chevron{display:none!important}

  /* presence pill (online / offline status): full, like the desktop header */
  .couple-presence{display:flex!important;align-items:center;height:38px;padding:3px 7px 3px 4px!important;gap:6px;margin:0;flex:0 1 auto;min-width:0}
  .couple-presence .presence-copy{display:flex!important;gap:3px}
  .couple-presence .presence-copy b{font-size:9px}
  .couple-presence .presence-copy small{font-size:8px}
  .couple-presence .presence-avatar{width:28px;height:28px;font-size:15px;border-radius:9px;flex:0 0 auto}

  /* the desktop nav bar, on its own full-width row */
  .main-nav,.couplina-header .main-nav{
    display:flex!important;order:3;flex:1 0 100%;width:100%;height:auto;
    justify-content:space-between;align-items:flex-start;gap:2px;
    overflow:visible;padding-top:2px;border-top:1px solid rgba(255,255,255,.06);
  }
  .couplina-header .main-nav .nav-link.nav-png-only,
  .main-nav .nav-link.nav-png-only{
    flex:1 1 0;width:auto;min-width:0;max-width:60px;height:60px;
  }
  .couplina-header .main-nav .nav-link.nav-png-only::before{width:40px;height:40px}
  .couplina-header .main-nav .nav-link.nav-png-only::after{width:48px;height:48px}
  .couplina-header .main-nav .nav-link.nav-png-only > img{
    width:24px;height:24px;min-width:24px;flex-basis:24px;margin-top:9px;
  }
  .couplina-header .main-nav .nav-link.nav-png-only > span:not(.nav-icon){
    font-size:8px;white-space:nowrap;
  }
}
@media(max-width:520px){
  .brand-copy{display:none}
}

/* ===== Keep row 1 on ONE line (logo + status + buttons), for guest and logged-in states ===== */
@media(max-width:900px){
  .header-brand-area{flex:0 0 auto!important;min-width:0}
  .header-actions{flex:1 1 0!important;min-width:0;justify-content:flex-start;gap:3px}
  .header-actions .header-icon-btn{flex:0 0 auto;width:30px;height:30px}
  .header-actions .header-icon-btn>svg{width:17px;height:17px}
  .header-actions .profile-btn{flex:0 0 auto;width:33px;height:33px}
  .header-actions .profile-btn .profile-avatar{width:27px;height:27px}

  .couple-presence{flex:1 1 0!important;min-width:0!important;overflow:hidden;height:36px;gap:5px;padding:3px 6px 3px 4px!important}
  .couple-presence .presence-avatar{width:26px;height:26px;font-size:14px}
  .couple-presence .presence-copy{min-width:0;flex:1 1 auto;overflow:hidden}
  .couple-presence .presence-copy b,
  .couple-presence .presence-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .couple-presence .presence-copy b{font-size:9px}
  .couple-presence .presence-copy small{font-size:7.5px}
  .couple-presence .presence-mood{width:20px;height:20px;font-size:11px;flex:0 0 auto}
}

/* logo ring must not touch the status pill; free a bit more room for the status text */
@media(max-width:900px){
  .header-brand-area{margin-inline-end:9px!important}
  .header-brand-area .brand-logo-orbit{width:38px!important;height:38px!important}
  .header-brand-area .brand-symbol{width:34px!important;height:34px!important}
  .header-actions{gap:2px}
  .header-actions .header-icon-btn{width:28px;height:28px}
  .header-actions .header-icon-btn>svg{width:16px;height:16px}
  .header-actions .profile-btn{width:31px;height:31px}
  .header-actions .profile-btn .profile-avatar{width:25px;height:25px}
  .couple-presence .presence-copy small{font-size:7px}
}
@media(max-width:900px){
  .header-brand-area{margin-inline-end:14px!important}
  .header-actions{gap:6px}
  .header-actions .notification-badge,.header-actions .mini-badge{transform:scale(.85)}
}
@media(max-width:900px){
  .header-actions{gap:4px}
  .couple-presence{gap:4px;padding:3px 5px 3px 3px!important}
  .couple-presence .presence-mood{width:18px;height:18px;font-size:10px}
}