/* v202: only active in the Telegram/mobile layout.  Desktop keeps its native,
   server-provided group filter and all of its existing separators unchanged. */
@media (max-width: 760px) {
  #groupFilter.mobilePickerNative { display: none !important; }
  .mobileGroupPicker { position: relative; min-width: 0; z-index: 3; }
  .mobileGroupPickerButton {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; height: 38px; padding: 0 10px; border: 1px solid #cbd7eb;
    border-radius: 11px; background: #fff; color: #26364f; font: inherit; font-size: 12px; font-weight: 400;
    text-align: left; box-shadow: 0 1px 2px rgba(16,24,40,.03);
  }
  .mobileGroupPickerButton:active, .mobileGroupPicker.isOpen .mobileGroupPickerButton {
    border-color: #7ea5ec; background: #f8fbff; box-shadow: 0 0 0 3px rgba(71,117,222,.11);
  }
  .mobileGroupPickerLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobileGroupPickerChevron { color: #3563bd; font-size: 17px; line-height: 1; transition: transform .18s ease; }
  .mobileGroupPicker.isOpen .mobileGroupPickerChevron { transform: rotate(180deg); }
  .mobileGroupPickerMenu {
    position: fixed; z-index: 2147483000; left: 8px; right: 8px;
    top: calc(env(safe-area-inset-top) + 54px); max-height: calc(100dvh - env(safe-area-inset-top) - 74px);
    overflow: auto; padding: 6px; border: 1px solid rgba(178,196,225,.92); border-radius: 16px;
    background: rgba(252,254,255,.985); box-shadow: 0 20px 48px rgba(15,35,65,.28);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overscroll-behavior: contain;
  }
  .mobileGroupPickerMenu[hidden] { display: none !important; }
  .mobileGroupPickerHeading {
    position: sticky; top: -6px; z-index: 1; margin: 5px -1px 2px; padding: 8px 9px 5px;
    background: linear-gradient(90deg,rgba(237,244,255,.99),rgba(252,254,255,.99));
    color: #44679f; font-size: 10px; font-weight: 900; letter-spacing: .08em;
  }
  .mobileGroupPickerOption {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 39px;
    padding: 8px 9px; border: 0; border-bottom: 1px solid #edf1f7; background: transparent; color: #26364f;
    font: 13px/1.25 inherit; text-align: left;
  }
  .mobileGroupPickerOption:last-child { border-bottom: 0; }
  .mobileGroupPickerOption span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobileGroupPickerOption i { width: 18px; flex: 0 0 18px; color: #2d6cc9; font-size: 15px; font-style: normal; font-weight: 900; text-align: center; }
  .mobileGroupPickerOption.isSelected { border-radius: 9px; background: #eaf2ff; color: #184c9b; font-weight: 850; }
  .mobileGroupPickerOption:active { background: #f0f5ff; }
}