/* ================= Телефон: до 760px в ширину или лёжа (низкий экран с тачем) =================
   Отдельный модуль адаптива: подключается последним и перекрывает общие стили.
   1. Каркас: шапка сверху, контент на всю ширину, рейл и боковая колонка в выезжающей панели.
   2. Общие блоки: карточки, сетки, вкладки, шапки страниц.
   3. Экраны по очереди. */

.nav-toggle, .nav-scrim { display: none; }

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  /* ---------- 1. Каркас ---------- */
  /* Как в мессенджере: экран фиксированной высоты, прокручивается только контент,
     поэтому поле ввода в чате всегда внизу, а шапка всегда сверху. */
  html, body { height: 100%; overflow: hidden; }
  .app { height: 100dvh; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top" "main"; gap: 8px;
    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .view > .main, .view[data-view="profile"] > .main, body.hide-right .view[data-view="chat"] > .main { grid-area: main; }
  .view > .right { display: none; }
  .main.scroll { padding: 14px 12px 20px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .topbar { gap: 6px; padding: 0; margin: 0; overflow: visible; }
  .topbar .tabs { flex: 1; min-width: 0; margin: 0; justify-content: center; overflow-x: auto; scrollbar-width: none; }
  .topbar .tab-grp { flex: none; }
  .topbar > .nav-toggle { display: grid; place-items: center; flex: none; width: 40px; height: 40px; }
  .nav-toggle .i { width: 22px; height: 22px; }

  /* Выезжающая панель: рейл (72px) и боковая колонка рядом, как в мобильных мессенджерах. */
  .rail, .side-col { position: fixed; top: 0; bottom: 0; z-index: 40; transition: transform .22s ease; }
  .rail { display: flex; left: 0; width: 72px; height: 100dvh; max-height: none; border-radius: 0; padding: 12px 0; background: #0d0a26; border-right: 1px solid var(--line); transform: translateX(-100%); }
  .side-col { left: 72px; width: min(320px, calc(100vw - 72px - 44px)); max-height: none; padding: 8px; background: #0d0a26; border-right: 1px solid var(--line); transform: translateX(calc(-100% - 72px)); }
  .app.nav-open .rail, .app.nav-open .side-col { transform: none; box-shadow: 0 0 40px rgb(0 0 0 / .6); }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgb(5 3 20 / .6); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  body:has(.app.nav-open) { overflow: hidden; }
  /* В панели снова видна шапка сервера: через неё открываются Достижения и Роли. */
  .side-col .server-head { display: block; }
  .side-col .sidebar { min-height: 0; }
  #side-hub, #side-store, #side-settings, #side-roles { overflow-y: auto; }

  /* Контент на всю ширину и прокручивается страницей, а не вложенным блоком. */
  .view > .main { min-width: 0; min-height: 0; }
  /* Логин остаётся прокручиваемой страницей. */
  body:has(#app[hidden]) { overflow: auto; }

  /* Поля ввода не мельче 16px: иначе iOS увеличивает страницу при фокусе. */
  input:not([type=checkbox]):not([type=range]), select, textarea, #settings-main .field select, .side-search input { font-size: 16px; }

  /* Идёт голосовой звонок: на вкладке «Голос» горит зелёная точка, чтобы звонок не потерялся. */
  .tab[data-tab="voice"] { position: relative; }
  .app:has(#voice-panel:not([hidden])) .tab[data-tab="voice"]::after { content: ""; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--green, #22d36b); box-shadow: 0 0 8px #22d36b; }

  /* Быстрый переход: подсказки клавиш на телефоне не нужны. */
  .sw-foot { display: none; }
  .switcher { margin-top: 8vh; }

  /* ---------- 2. Общие блоки ---------- */
  .card { padding: 12px; border-radius: 16px; }
  .card-head { flex-wrap: wrap; row-gap: 4px; }
  .card-head h3, .card-head b { min-width: 0; }
  .row2, .row3, .p-grid, .ach-mid, .ach-top, .more-grid { grid-template-columns: minmax(0, 1fr); }
  .seg-tabs { overflow-x: auto; scrollbar-width: none; }
  .seg-tabs button { flex: none; }
  .page-head { flex-wrap: wrap; }
  .page-head p { overflow-wrap: anywhere; }
  .link, .soon-pill { white-space: nowrap; }

  /* ---------- 3. Экраны ---------- */
  /* Чат: место под текст важнее кнопок вложений. */
  .composer { margin: 0 8px 8px; }
  .composer > .icon-btn:not(:first-child):not(.send):not([id*="mic"]) { display: none; }
  .composer textarea { font-size: 16px; }
  .composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 16px: iOS не зумит поле при фокусе */
  #chat-topic { display: none; }
  /* Подсказки про Ctrl K и горячие клавиши на телефоне бесполезны и закрывают переписку. */
  #tips { display: none !important; }
  .main-head .head-actions [data-soon] { display: none; }

  /* Профиль */
  .p-name { overflow-wrap: anywhere; font-size: clamp(24px, 8vw, 34px); line-height: 1.1; }
  .lvl-card { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px 12px; }
  .lvl-card > * { min-width: 0; }
  .lvl-card .xp { grid-column: 1 / -1; order: 3; }
  .lvl-card .lvl-num { margin: 0; }
  .lvl-card .xp-top { display: flex; justify-content: space-between; gap: 8px; }
  .lvl-card .xp-top span { white-space: nowrap; }
  .lvl-card .next-lvl { justify-self: end; margin: 0; }
  .lvl-card .next-lvl b, .lvl-card .next-lvl small { white-space: nowrap; }
  .lvl-card .lvl-emblem { width: 64px; height: 64px; }
  .lvl-card .next-lvl { padding: 8px 10px; }
  .xp-card { flex-wrap: wrap; gap: 10px 14px; }
  .xp-card > * { min-width: 0; }
  .xp-top { flex-wrap: wrap; gap: 2px 8px; }
  .meter { max-width: 100%; overflow: hidden; gap: 2px; }
  .meter i { flex: 1 1 0; min-width: 0; }
  .xp-card .xp-body { flex: 1 1 190px; }
  .xp-line { flex-wrap: wrap; }
  .plat-list li, .plat-list > * { flex-wrap: wrap; }
  .fav-games { flex-wrap: wrap; }
  .p-actions { flex-wrap: wrap; }

  /* События */
  .ev-row { flex-wrap: wrap; }
  .ev-row .rc-img { width: 96px; height: 64px; }
  .ev-row .rc-meta { min-width: 0; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .ev-row .rc-act { flex-basis: 100%; justify-content: flex-end; }

  .sec-row { flex-wrap: wrap; gap: 6px 12px; }
  .sort-lbl .sel-btn { white-space: nowrap; }
  .events-hero .hero-actions, .hub-hero .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { max-width: 100%; white-space: normal; }
  .hub-hero { padding: 14px 16px; }
  .hub-hero h2, .hero-card h2 { font-size: clamp(26px, 9vw, 34px); overflow-wrap: anywhere; }

  /* Достижения */
  .ach-mid .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-grid .cat-card:nth-child(n+5):nth-last-child(-n+2) { grid-column: auto; }

  /* Роли: таблица прокручивается вбок внутри карточки, а не обрезается. */
  /* Роли: на телефоне в таблице остаются роль, участники и цвет, описание прав видно в редакторе роли. */
  table.roles { width: 100%; table-layout: fixed; }
  table.roles :is(th, td) { padding-inline: 4px; }
  table.roles :is(th, td):nth-child(2) { width: 76px; }
  table.roles :is(th, td):nth-child(3) { width: 44px; }
  table.roles td:first-child { min-width: 0; overflow: hidden; }
  table.roles :is(th, td):nth-child(n+4) { display: none; }
  .perm-card { min-width: 0; }
  .perm-card b, .perm-card small { overflow-wrap: anywhere; hyphens: auto; }

  /* Настройки: строки с переключателем складываются, текст не сжимается в столбик. */
  .opt-list li { flex-wrap: wrap; row-gap: 8px; }
  .opt-list li > div { flex: 1 1 0; min-width: 0; }
  .opt-list li:has(.keycap) > div { flex-basis: calc(100% - 40px); }
  .opt-list li:has(.keycap) .keycap { margin-left: 34px; }
  .opt-list li:has(.keycap) .tgl-wrap { margin-left: auto; }
}

/* Совсем узкие телефоны (iPhone SE и подобные): плашка «До следующего уровня» уходит на свою строку. */
@media (max-width: 380px) {
  .lvl-card { grid-template-columns: auto minmax(0, 1fr); }
  .lvl-card .next-lvl { grid-column: 1 / -1; justify-self: stretch; order: 4; }
  .topbar .tab { padding: 8px 9px; }
}

/* Телефон лёжа: в панели мало высоты, поэтому она прокручивается целиком, а не только список каналов. */
@media (max-height: 500px) and (pointer: coarse) {
  .side-col { overflow-y: auto; }
  .side-col .sidebar:not([hidden]) { flex: none; display: block; }
  .side-col .side-scroll { overflow: visible; max-height: none; }
  .side-col .server-banner { min-height: 0; }
}