/* ═══════════════════════════════════════════════════════════
   FRENDLY — мобильная адаптация (телефоны, ширина ≤ 760px)
   Загружается ПОСЛЕ main.css. Все правила внутри @media — десктоп
   не затрагивается. Файл можно удалить для полного отката.
   ═══════════════════════════════════════════════════════════ */

/* Кнопка «назад» в чате — по умолчанию скрыта (видна только на телефоне) */
.msg-back { display: none; }

/* ── Поиск: подсветка не должна разрывать слово ──
   Раньше .ls-name был flex+gap, и куски имени вокруг <mark> расходились
   («Ble yns»). Делаем имя обычной строкой, «галочку» выравниваем inline. */
.ls-name { display: block !important; }
.ls-name svg { vertical-align: -2px; }
.ls-name mark, .srch-u-n mark, .mi-t mark {
  display: inline; padding: 0; margin: 0;
  background: rgba(124, 92, 255, .22); color: inherit;
  border-radius: 3px; font-weight: 700;
}
body.dark .ls-name mark, body.dark .srch-u-n mark { background: rgba(124, 92, 255, .30); }

@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* iOS не должен «приближать» при тапе по полю — для этого шрифт ровно 16px */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea, select { font-size: 16px !important; }

  /* Каркас — одна колонка во всю ширину, снизу место под нижнюю панель */
  .shell {
    flex-direction: column;
    gap: 12px;
    padding: 12px 12px calc(78px + env(safe-area-inset-bottom));
  }
  #main { width: 100%; min-width: 0; order: 1; }

  /* Боковая панель (профиль-карточка, музыка, группы) — вторичное, скрываем */
  #sidebar { display: none !important; }

  /* Навигация → фиксированная нижняя панель */
  #nav-rail {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    margin: 0;
    border: none;
    border-top: 1px solid var(--brd);
    border-radius: 0;
    box-shadow: 0 -2px 16px rgba(0,0,0,.10);
    background: var(--card);
    z-index: 250;
  }
  #nav-rail .nb {
    flex: 1 1 0;
    max-width: 56px;
    height: 44px;
    border-radius: 12px;
    margin: 0;
  }
  #nav-rail .nb .bdg { top: 4px; right: 8px; }

  /* ── Музыкальный мини-плеер ── */
  .mini-player {
    height: calc(58px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mp-inner { height: 58px; padding: 0 12px; gap: 10px; }
  .mp-info { flex: 1 1 auto; min-width: 0; }
  .mp-center { flex: 0 0 auto; }
  .mp-right { flex: 0 0 auto; gap: 6px; }
  .mp-vol, .mp-time { display: none; }   /* громкость/время прячем — мало места */

  /* Когда играет музыка: плеер внизу, навигация — НАД ним (без перекрытия) */
  body.has-player #nav-rail { bottom: calc(58px + env(safe-area-inset-bottom)); }
  body.has-player .shell { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }

  /* ── Шапка ── */
  #hdr { padding-top: env(safe-area-inset-top); }
  .hdr-in { padding: 0 12px; gap: 8px; height: var(--hdr); }
  .hdr-search { flex: 1 1 auto; min-width: 0; }
  .hdr-pub { padding: 7px 12px; }
  .hdr-pub span { display: none; }       /* оставляем только «+» */

  /* ── Композер поста: панель иконок переносится, не вылезает ── */
  .comp { padding: 14px; gap: 10px; }
  .comp-b { flex-wrap: wrap; gap: 10px 8px; }
  .comp-sub { margin-left: auto !important; }

  /* ── Сообщения: одна колонка ── */
  .msg-wrap {
    flex-direction: column;
    height: calc(100dvh - var(--hdr) - 96px);
  }
  body.has-player .msg-wrap { height: calc(100dvh - var(--hdr) - 96px - 58px); }
  .msg-list { width: 100%; border-right: none; }

  /* Диалог НЕ выбран → показываем список, правую панель прячем */
  .msg-wrap:has(.msg-empty) .msg-chat { display: none; }
  .msg-wrap:has(.msg-empty) .msg-list { display: flex; }

  /* Диалог ОТКРЫТ → переписка на ВЕСЬ экран поверх всего (перекрывает
     навигацию и плеер); поле ввода всегда внизу над «чёлкой». */
  .msg-wrap:not(:has(.msg-empty)) .msg-list { display: none; }
  .msg-wrap:not(:has(.msg-empty)) .msg-chat {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;            /* top/right/bottom/left: 0 */
    width: auto;
    height: auto;
    z-index: 500;        /* выше навигации (250) и плеера (300) */
    background: var(--bg);
  }
  .msg-wrap:not(:has(.msg-empty)) .msg-ch {
    padding-top: calc(14px + env(safe-area-inset-top));
  }
  .msg-wrap:not(:has(.msg-empty)) .msg-body { flex: 1; min-height: 0; }
  .msg-wrap:not(:has(.msg-empty)) .msg-inp {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* Поле ввода: компактнее, чтобы все кнопки (включая микрофон) влезали */
  .msg-inp { padding: 10px 8px; gap: 3px; flex-wrap: nowrap; }
  .msg-inp input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; font-size: 16px; }
  .msg-inp .msg-ibtn { padding: 6px; flex-shrink: 0; }
  .msg-inp .msg-ibtn svg { width: 19px; height: 19px; }

  /* Кнопка «назад» в шапке диалога */
  .msg-back {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin: 0 4px 0 -4px;
    border: none; background: none; color: var(--t1);
    border-radius: 10px; flex-shrink: 0; cursor: pointer;
  }
  .msg-back:active { background: var(--hov); }

  /* Модальные окна — почти во всю ширину экрана */
  .modal { width: 94vw !important; max-width: 94vw !important; }
  .overlay { padding: 12px; }
}

/* Совсем узкие экраны */
@media (max-width: 380px) {
  #nav-rail .nb svg { width: 18px; height: 18px; }
  .hdr-in { gap: 6px; }
}