/* POLO2 Android v0.1.5 Beta: focused mobile UI corrections.
   Do not reduce global text/zoom: device font zoom caused the perceived scale issue.
   All visual adjustments below are gated to phone-size viewports. */
#btn-admin-portal-mobile, .p2b-mobile-server-list { display: none; }
@media screen and (max-width:760px) {
  /* Bottom Servers tab owns opening the server/channel drawer. The generic
     navigation shortcuts live in the bottom bar, so don't duplicate them here. */
  #app > .sidebar > .tabs { display:none!important; }
  #app > .sidebar > .p2b-mobile-server-list {
    display:block; flex:0 0 auto; padding:10px 4px 6px;
  }
  #app .p2b-mobile-server-list h3 {
    font:800 14px/1.3 var(--brand); margin:0 0 8px; color:#fff;
  }
  #p2b-mobile-server-items {display:flex;flex-direction:column;gap:4px;min-width:0;max-height:min(32dvh,280px);overflow-y:auto;overscroll-behavior:contain;}
  #app .p2b-mobile-server-item {
    width:100%; min-width:0; min-height:44px; display:flex; align-items:center;
    gap:10px; padding:7px 8px; background:transparent; color:#eee;
    border:1px solid transparent; border-radius:7px; text-align:left;
    font:800 13px/1.35 var(--body); cursor:pointer;
  }
  #app .p2b-mobile-server-item.active {background:#222;border-color:#414141;}
  #app .p2b-mobile-server-icon { flex:0 0 30px; width:30px; height:30px;
    border:1px solid #484848; border-radius:50%; overflow:hidden;
    display:grid;place-items:center; background:#181818; font-size:13px;
  }
  #app .p2b-mobile-server-icon img {width:100%;height:100%;object-fit:cover;}
  #app .p2b-mobile-server-name {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #app .p2b-mobile-server-empty {margin:0;padding:8px;color:#aaa;font-size:12px;}
  #app .p2b-mobile-server-create {color:#d6d6d6;}
  #app > .sidebar > #channel-nav:not([hidden]) {margin-top:8px;border-top:1px solid #303030;padding-top:8px;flex:1 1 auto;min-height:90px;overflow-y:auto;}
  /* The Servers tab replaces the duplicated top-left hamburger on phones.
     DM conversation uses its own back button. */
  #app .center .bar > button.menu-btn {display:none!important;}
  #app .center .bar {min-width:0;}
  /* Preserve profile badge styles, but give mobile name rows more breathing room. */
  #app .profile-badges {gap:3px;flex-wrap:wrap;white-space:normal;max-width:100%;}
  #app .profile-badges .admin-badge,
  #app .profile-badges .verified-icon,
  #app .profile-badges .custom-badge,
  .profile-popout-badges .admin-badge,
  .profile-popout-badges .verified-icon,
  .profile-popout-badges .custom-badge {
    width:18px!important;height:18px!important;
    min-width:18px!important;min-height:18px!important;flex-basis:18px!important;
    font-size:9px;line-height:1;
  }
  #app .profile-badges .icon-badge i,
  .profile-popout-badges .icon-badge i {font-size:9px;}
  .profile-popout-badges {gap:3px;flex-wrap:wrap;}
  /* Mobile-only Admin Portal link at the bottom of the login choices.
     The real (desktop) button is preserved for existing security/login logic. */
  #auth > #btn-admin-portal {display:none!important;}
  #auth #btn-admin-portal-mobile {
    display:flex!important;align-items:center;justify-content:center;gap:8px;
    width:100%;min-height:42px;margin-top:5px;
    font:800 13px/1.3 var(--brand);text-align:center;
    border:1px solid var(--g3);background:#000;color:#fff;
  }
  #auth #btn-admin-portal-mobile i {font-size:12px;}
}