/* V24.15 V20 — TARGETED MOBILE UI ONLY
 * Baseline: V19.
 * Scope:
 * 1) keep bottom nav visible/clickable while Settings is open;
 * 2) add employee avatar-change control to mobile Settings;
 * 3) mobile search shows both groups and employees, including group members;
 * 4) mobile search/top area follows the primary color and gets a clear focus border;
 * 5) remove mobile filter tabs + employee section heading to push the list up.
 * No Firebase, chat, unread, sort, presence or PC business logic changes.
 */
@media (max-width:767px){
  /* Settings screen must not cover the bottom navigation. */
  #settingsModal.show{
    padding-bottom:calc(var(--mobile-nav-h,60px) + env(safe-area-inset-bottom,0px) + 8px) !important;
  }
  #settingsModal.show .account-modal-body{
    padding-bottom:calc(var(--mobile-nav-h,60px) + env(safe-area-inset-bottom,0px) + 24px) !important;
  }
  body.v20-settings-open .sidebar-icon{
    z-index:2147483601 !important;
    pointer-events:auto !important;
  }

  /* Zalo-like compact mobile header: search area follows the selected accent. */
  .sidebar-menu .search-box-area{
    background:var(--primary,#25D366) !important;
    border-bottom:0 !important;
    padding:8px 12px !important;
  }
  .sidebar-menu .search-input{
    background:rgba(255,255,255,.90) !important;
    color:#172126 !important;
    border:1.5px solid rgba(255,255,255,.42) !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.08) !important;
  }
  .sidebar-menu .search-input::placeholder{color:#68767d !important;}
  .sidebar-menu .search-input:focus{
    outline:none !important;
    border-color:rgba(255,255,255,.98) !important;
    box-shadow:0 0 0 2px rgba(255,255,255,.34),inset 0 1px 2px rgba(0,0,0,.08) !important;
  }
  .sidebar-menu .create-btn{
    background:var(--primary,#25D366) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.55) !important;
    box-shadow:0 4px 12px color-mix(in srgb,var(--primary,#25D366) 28%,transparent) !important;
  }

  /* Remove the old mobile filters/headings so the contact list starts higher. */
  .sidebar-menu .filter-tabs{display:none !important;}
  #tabContactsSection > .section-header{display:none !important;}

  /* Search results are compact and visually separated like a mobile chat app. */
  .sidebar-menu .search-box-area.v20-search-active .search-input{
    border-color:#fff !important;
    box-shadow:0 0 0 2px rgba(255,255,255,.42),0 3px 12px rgba(0,0,0,.08) !important;
  }

  /* Employee avatar control inside Settings. */
  #v20SettingsAvatarSection{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:12px !important;
    margin-bottom:10px !important;
    border-radius:16px !important;
    background:rgba(127,127,127,.08) !important;
    border:1px solid rgba(127,127,127,.16) !important;
  }
  #v20SettingsAvatarPreview{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:var(--primary,#25D366) !important;
    color:#fff !important;
    font-weight:800 !important;
    font-size:20px !important;
    border:2px solid rgba(255,255,255,.65) !important;
    box-shadow:0 4px 14px rgba(0,0,0,.14),inset 0 1px 2px rgba(255,255,255,.45) !important;
  }
  #v20SettingsAvatarPreview img{width:100%;height:100%;object-fit:cover;display:block;}
  #v20SettingsAvatarSection .v20-avatar-copy{min-width:0;flex:1;}
  #v20SettingsAvatarSection .v20-avatar-title{font-weight:800;color:var(--text-main) !important;font-size:14px !important;}
  #v20SettingsAvatarSection .v20-avatar-note{margin-top:3px;color:var(--text-sub) !important;font-size:11px !important;line-height:1.35;}
  #v20SettingsAvatarSection button{
    border:1px solid color-mix(in srgb,var(--primary,#25D366) 45%,transparent) !important;
    background:color-mix(in srgb,var(--primary,#25D366) 12%,transparent) !important;
    color:var(--primary,#25D366) !important;
    border-radius:12px !important;
    padding:8px 10px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
  }

  :root[data-theme="dark"] #v20SettingsAvatarSection,
  body[data-theme="dark"] #v20SettingsAvatarSection{
    background:rgba(255,255,255,.055) !important;
    border-color:rgba(255,255,255,.10) !important;
  }
  :root[data-theme="light"] #v20SettingsAvatarSection,
  body[data-theme="light"] #v20SettingsAvatarSection{
    background:#f5f7f8 !important;
    border-color:#dfe7ea !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #v20SettingsAvatarPreview{transition:none !important;}
}