/* ==================== ТЕЛЕФОНЫ ====================
   Подключается последним, поэтому перебивает всё выше.
   Все мобильные правки собраны здесь одним куском — так их видно целиком
   и легко крутить, не разыскивая по пяти файлам.

   Главная беда была в жёсткой высоте: #messages имел height: 480px
   независимо от экрана. На телефоне это выдавливало строку ввода и панель
   пользователей за пределы экрана, а прокручивалась вся страница вместо
   ленты сообщений. */

@media (max-width: 768px) {
  /* Высоту ленты считает JS (подогнатьЛенту в app.js), а не CSS.
     Здесь пробовались оба «чистых» способа, и оба не годятся:
       calc(100dvh - N) — N приходится угадывать, а высота шапки зависит
         от выреза экрана и от того, в сколько строк перенеслись кнопки;
       flex: 1 на колонке — при min-height у body лента не сжимается,
         а растёт под содержимое, и страница уезжает ещё сильнее.
     Поэтому оставляем ленте только прокрутку внутри себя. */
  #messages,
  #cinema-container {
    height: auto;
    min-height: 140px;
  }
  #messages { overflow-y: auto; }
  #chat-main { min-height: 0; }

  /* Строка ввода: кнопка «Отправить» вылезала за край.
     Даём полю сжиматься и убираем лишние отступы у кнопок. */
  .input-row { gap: 3px; flex-wrap: nowrap; }
  .input-row input[type="text"] { min-width: 0; flex: 1 1 auto; }
  .input-row button { flex: 0 0 auto; }
  .input-row .send-btn,
  .input-row button[type="submit"] { padding: 8px 10px; font-size: 8px; }

  /* Сообщения: пиксельный шрифт широкий, при 12px в строку влезало
     два-три слова. Меньше кегль и шире пузырь — текст читается абзацем. */
  .message { max-width: 94%; gap: 6px; margin-bottom: 8px; }
  .message-text { font-size: 10px; line-height: 1.6; }
  .message-body { padding: 5px 9px 6px; }
  .message-avatar { font-size: 20px; }
  .message-header { font-size: 8px; gap: 6px; }

  /* Панель пользователей под лентой — короткой полосой, а не во весь экран */
  #online-panel { min-height: 0; max-height: 132px; overflow-y: auto; }

  /* Вкладки комнат и верхние кнопки переносим аккуратно */
  .top-bar { gap: 6px; }
  .room-tabs, .top-actions { flex-wrap: wrap; gap: 5px; }

  /* Вырезы и скруглённые углы: viewport-fit=cover уже стоит в разметке */
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    /* Сверху вырез забыли, а он самый заметный: статус-бар объявлен
       полупрозрачным (apple-mobile-web-app-status-bar-style), значит время
       и батарея рисуются ПОВЕРХ страницы, и «Болталка» уезжала под чёлку.
       К собственному отступу в 20px прибавляем вырез — там, где его нет,
       прибавится ноль и вид не изменится. */
    padding-top: calc(20px + env(safe-area-inset-top));
  }
}

/* Совсем узкие экраны */
@media (max-width: 400px) {
  h1 { font-size: 15px; }
  .room-tabs button { padding: 7px 9px; font-size: 8px; }
  .message-text { font-size: 9px; }
}

/* Пальцем не наводят: подсветки по hover на телефоне только мешают,
   а увеличение при наведении оставляет элемент «залипшим» после тапа */
@media (hover: none) {
  .game-card:hover { transform: none; }
  .raindrop.whale:hover { transform: none; opacity: 0.4 !important; }
}

/* ==================== ПРИГЛАШЕНИЕ УСТАНОВИТЬ ====================
   Показывается один раз после регистрации. Снизу, чтобы не закрывать чат */
.установка-баннер {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 10000;
  background: var(--reaction-picker-bg);
  border: 1px solid var(--text-secondary);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: установка-въезд 0.25s ease;
}
@keyframes установка-въезд {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.установка-текст { font-size: 8px; color: var(--text-muted); line-height: 1.7; }
.установка-текст b { display: block; font-size: 10px; color: var(--text-secondary); margin-bottom: 5px; }
.установка-кнопки { display: flex; gap: 8px; }
.установка-кнопки button {
  flex: 1;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 8px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border-light);
}
.установка-да  { background: var(--btn-bg); color: #fff; border-color: var(--btn-bg); }
.установка-нет { background: transparent; color: var(--text-muted); }
@media (min-width: 620px) {
  .установка-баннер { left: auto; right: 20px; width: 320px; }
}

/* ==================== КНОПКА ОТПРАВКИ ====================
   Надпись «Отправить» съедала полстроки ввода. Рамка та же, внутри
   пиксельный треугольник (svg с crispEdges — без сглаживания краёв).
   На ПК всё как было: там места хватает и вид уже настроен. */
.send-icon { display: none; }

/* ==================== КТО В СЕТИ ====================
   Кнопка нужна только на телефоне: на ПК панель и так стоит рядом с лентой.
   Поэтому и она, и крестик по умолчанию скрыты — ПК-вид не трогаем. */
.users-btn,
.панель-закрыть { display: none; }

@media (max-width: 768px) {
  /* --- отправка значком --- */
  .send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px !important;
    min-width: 44px;
  }
  .send-icon { display: block; width: 16px; height: 16px; }
  .send-text { display: none; }

  /* --- кнопка списка слева, тема и выход справа --- */
  .users-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: auto;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 7px 11px;
    font-family: inherit;
    font-size: 9px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }
  .users-btn.активна { background: var(--btn-bg); color: #fff; border-color: var(--btn-bg); }

  /* Пока открыта личка, горит именно эта кнопка: комнаты все погашены,
     ведь в общем чате мы не находимся */
  /* Селектор с тегом нарочно: base.css красит button:hover, и вес 0-2-1
     перебил бы простое .users-btn.в-личке — после тапа на телефоне hover
     залипает, и признак «я в личке» смазался бы */
  button.users-btn.в-личке {
    /* один в один как .room-tab.active: тот же фон и то же усиленное
       свечение — выделение читается так же, как у вкладок комнат */
    background: var(--btn-hover);
    box-shadow: 0 0 12px var(--shadow-color);
  }

  /* Свёрнутой панели на телефоне нет вовсе: полоса в 42px под лентой
     ничего не показывала, а место отнимала */
  #online-panel { display: none; }

  /* Выпадающий список под своей кнопкой: видно, откуда он взялся,
     и той же кнопкой закрывается. Координаты ставит toggleUsersPanel,
     потому что кнопка переносится по строкам и её место не предугадать. */
  #online-panel.развёрнута {
    display: block;
    position: fixed;
    z-index: 9000;
    max-height: 50vh;
    min-height: 0;
    margin: 0;
    padding: 10px 12px;
    overflow-y: auto;
    border: 2px solid var(--border-light);
    border-radius: 10px;
    background: var(--reaction-picker-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    animation: панель-въезд 0.15s ease;
  }
  #online-panel.развёрнута h3 {
    margin: 0 0 8px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--divider);
  }
  /* крестик не нужен: закрывает сама кнопка или тап мимо списка */
  #online-panel.развёрнута .панель-закрыть { display: none; }
  body.панель-поверх { overflow: hidden; }

  /* Панель лежит внутри #chat-container, а у него свой z-index: 1.
     Из-за этого её 9000 работают только внутри контейнера, а виджет погоды —
     тоже z-index 1, но ниже по разметке — оказывался сверху. Пока панель
     открыта, поднимаем весь контейнер. */
  body.панель-поверх #chat-container { z-index: 9000; }
  body.панель-поверх #weather-widget { display: none; }

  /* Кнопки идут первой строкой, вкладки комнат — второй */
  .top-actions { order: -1; width: 100%; }
  .room-tabs   { order: 0;  width: 100%; justify-content: center; }

  /* Подтягиваем всё под заголовок: каждый лишний отступ сверху — это
     строка «30 августа» или «Москва», которая не влезла внизу */
  h1 { margin-bottom: 4px; gap: 6px; }
  .top-bar { margin-bottom: 6px; }
  #pinned-display:empty { display: none; }

  /* Смена региона не добавляется к виджету, а ЗАМЕНЯЕТ его: часы, дата и
     температура прячутся, остаётся облачко и поле ввода одной строкой.
     Облачко нарочно не прячем — им же и возвращаются обратно. */
  .weather-actions { margin-top: 0; }
  #weather-widget.выбор-региона .weather-time,
  #weather-widget.выбор-региона .weather-info { display: none; }
  #weather-widget.выбор-региона .weather-actions {
    flex-basis: auto;               /* в строку с облачком, а не переносом */
    margin: 0;
  }
  #weather-widget.выбор-региона { gap: 10px; }

  /* Часы и погода занимали высоту целого экрана: крупные кегли плюс
     разрыв в 40px между блоками. Ужимаем, чтобы влезало без прокрутки. */
  #weather-widget { gap: 14px; margin-top: 8px; padding: 4px 0; }
  .weather-clock { font-size: 16px; }
  .weather-temp  { font-size: 16px; }
  .weather-icon  { font-size: 26px; }
  .weather-day   { font-size: 8px; }
  .weather-date  { font-size: 8px; }
}

@keyframes панель-въезд {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==================== РЕЖИМ КЛАВИАТУРЫ ====================
   Клавиотура съедает больше половины экрана. Пока она открыта, на экране
   остаются только переписка и строка ввода — всё остальное прячется и
   возвращается, как только она закрылась. Класс ставит JS
   (проверитьКлавиатуру в app.js) по разнице visualViewport и innerHeight. */
@media (max-width: 768px) {
  /* Что прятать — решает подгонка в app.js по факту нехватки места,
     а не признак «клавиатура открыта». Признак этот на iOS не работает:
     там страница сжимается целиком, и отличить клавиатуру не по чему.
     Нехватка же места видна всегда, в любой модели. */
  .скрыт-подгонкой { display: none !important; }

  /* строка ввода прижата к низу видимой области, лента над ней */
  body.клавиатура-открыта .input-row { margin-top: 4px; }
  body.клавиатура-открыта #messages { min-height: 100px; }

  /* Нижний отступ по вырезу нужен, чтобы содержимое не лезло под
     домашнюю полоску. Но клавиатура эту полоску и закрывает собой —
     отступ становится пустым зазором, и поле ввода всплывает над
     клавиатурой ровно на величину выреза (на iPhone это 34px).
     Пока она открыта, отступ убираем: поле садится к ней вплотную. */
  body.клавиатура-открыта { padding-bottom: 0; }

  /* Верхний отступ при клавиатуре НЕ меняем. Пробовали ужать 20px до 4px
     ради места — содержимое дёргалось вверх на эти 16px в тот же миг, когда
     идёт подгонка, и через раз выходил скачок. Место того не стоит.

     А вот нижнюю распорку снимаем — это и есть лечение «убегания» на iOS.
     Там при клавиатуре сжимается МАКЕТНАЯ область (замерено на iPhone,
     iOS 18.7: 699 -> 611), а min-height: 100dvh остаётся прежним, 699:
     единица dvh на клавиатуру не реагирует. Разница в 88 пикселей —
     прокручиваемый излишек, и система прокручивает его до упора, показывая
     поле ввода. Лента при этом уезжает верхом за экран (её верх -40 вместо
     48). Убираем излишек — прокручивать становится нечего.
     На андроиде макетная область не меняется, и правка там ничего не
     делает: высота страницы и так не может стать меньше неё. */
  body.клавиатура-открыта { min-height: 0; }
}

/* ==================== ПАНЕЛЬ ДИАГНОСТИКИ ====================
   Только для тестировщика. position: fixed — чтобы не попадать в замеры
   страницы: нижняяГраницаСодержимого() пропускает фиксированное */
.диаг {
  position: fixed;
  left: 4px; right: 4px;
  top: calc(4px + env(safe-area-inset-top));   /* из-под чёлки */
  z-index: 99999;
  max-height: 46vh;
  overflow-y: auto;
  background: rgba(8, 10, 24, 0.94);
  border: 1px solid #6cf;
  border-radius: 8px;
  padding: 6px 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.45;
  color: #cfe;
}
.диаг.свёрнута .дг-числа,
.диаг.свёрнута .дг-журнал { display: none; }
.дг-шапка {
  display: flex; align-items: center; gap: 6px;
  color: #6cf; margin-bottom: 4px; font-size: 10px;
}
.дг-шапка button {
  margin-left: auto; background: transparent; border: 1px solid #6cf;
  color: #6cf; border-radius: 4px; font: inherit; padding: 1px 6px; cursor: pointer;
}
.дг-шапка .дг-выкл { margin-left: 4px; }
.дг-строка { display: flex; justify-content: space-between; gap: 8px; }
.дг-строка b { color: #fff; }
.дг-плохо { color: #f77; }
.дг-плохо b { color: #f77; }
.дг-журнал {
  margin-top: 5px; padding-top: 5px;
  border-top: 1px solid rgba(108, 204, 255, 0.35);
  color: #9ab;
}
.дг-журнал b { color: #ffd93d; font-weight: normal; }

/* ==================== СЖАТИЕ ПОД КЛАВИАТУРОЙ ====================
   При открытой клавиатуре видимой области остаётся около 300px, и почти
   треть её съедала строка ввода. Пока печатают, микрофон и скрепка не нужны
   — прячем их и ужимаем отступы, освободившееся отдаём переписке. */
@media (max-width: 768px) {
  body.клавиатура-открыта #voice-toggle,
  body.клавиатура-открыта #file-toggle { display: none; }

  body.клавиатура-открыта .input-row { margin-top: 2px; gap: 4px; }
  body.клавиатура-открыта .input-row input[type="text"] { padding: 6px 9px; }
  body.клавиатура-открыта .send-btn { padding: 6px 10px !important; }
  body.клавиатура-открыта .emoji-toggle { font-size: 15px; padding: 2px 4px; }

  body.клавиатура-открыта #messages { margin-bottom: 0; }

  /* Запираем страницу ТОЛЬКО в накладной модели (Андроид): там макетная
     область остаётся во всю высоту экрана, видно лишь верхушку над
     клавиатурой, и разницу можно проскроллить — уехав в пустоту под ней.
     В сжимающей модели (iOS) страница и так ровно по видимой области,
     запирать нечего. Класс ставит проверитьКлавиатуру в app.js.
     height: 100% здесь нарочно НЕ ставим: в сжимающей модели он мешает
     странице следовать за уменьшившимся экраном. */
  html.запереть-страницу,
  body.запереть-страницу { overflow: hidden; }
}

/* Оттягивание за край не должно показывать пустоту за содержимым */
html, body { overscroll-behavior-y: none; }

/* ==================== БЕЗ САМОВОЛЬНОГО УВЕЛИЧЕНИЯ ====================
   WebKit увеличивает страницу, когда фокус попадает в поле со шрифтом
   меньше 16px. Это не настройка и не отключается — только размером шрифта.
   А масштаб ломает все замеры высот, потому что видимая область считается
   в масштабированных единицах. Поэтому у всех полей ровно 16px.
   Отступы поджаты, чтобы более крупный шрифт не раздул строку ввода. */
@media (max-width: 768px) {
  /* От обратного, а не списком типов: перечисляя типы, легко забыть один
     (так и вышло с выбором времени в настройках темы), и он останется
     причиной увеличения. Флажки и выбор файла не текстовые, их не трогаем. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  textarea,
  select { font-size: 16px !important; }

  .input-row input[type="text"] { padding: 7px 9px; }
  #login input { padding: 9px 10px; }
  .weather-actions input { width: 130px; padding: 5px 7px; }
}

/* ==================== ПИКСЕЛЬНЫЕ ЗНАЧКИ ====================
   Юникодные ▶ и ⏸ шрифт рисует как ему вздумается — пауза выходила
   смайликом. Значки нарисованы прямоугольниками, без сглаживания. */
.voice-play svg { width: 11px; height: 12px; display: block; }
.voice-play { display: inline-flex; align-items: center; justify-content: center; }
.voice-play.is-playing { text-indent: 0; }

/* Кнопка «кто в сети»: выровнена по центру и в общем пиксельном стиле.
   display здесь НЕ задаём: кнопка нужна только на телефоне, а на ПК список
   онлайна и так открыт рядом с лентой. Показывает её медиазапрос выше,
   иначе это правило перебило бы display:none и кнопка вылезла бы на ПК. */
.users-btn {
  align-items: center;
  justify-content: center;
  gap: 7px;
  line-height: 1;
  min-height: 34px;
  border-width: 2px;
  border-radius: 10px;
  box-shadow: 0 0 8px var(--shadow-color);
  text-shadow: 1px 1px 0 #000;
  background: var(--btn-bg);
  color: #fff;
  border-color: var(--border-light);
  padding: 8px 12px;
}
.users-btn.активна { background: var(--btn-hover); }
body.light-theme .users-btn { text-shadow: none; }

/* Пустая кнопка реакции (серый смайл) на телефоне не показывается:
   реакция вызывается нажатием по самому сообщению, а значок на каждой
   реплике только сорил. Поставленную реакцию по-прежнему видно. */
@media (max-width: 768px) {
  .reaction-trigger.пустая { display: none; }
}

/* Значок «пользователи»: нарисован прямоугольниками, поэтому не зависит от
   того, какой эмодзи подставит система, и не мельчает вместе со шрифтом
   кнопки. Выравнивание — флексом по обеим осям, а не на глаз. */
.users-icon {
  width: 15px;
  height: 12px;
  display: block;
  flex: 0 0 auto;
}
.users-btn #users-count {
  font-size: 11px;
  line-height: 1;
  display: block;
}

/* Серый смайл показывается ТОЛЬКО пока выбирают реакцию — он подсказывает,
   куда она встанет. Постоянно висеть на каждой реплике ему незачем: от этого
   чат выглядел мёртвым, сплошные серые кружки. */
@media (max-width: 768px) {
  .reactions:has(.reaction-picker.active) .reaction-trigger.пустая {
    display: inline-flex;
  }
}

/* ==================== ОКНО НАСТРОЙКИ ТЕМЫ ====================
   Строки там выстроены в ряд с запретом переноса у подписи. После того как
   всем полям задали 16px (иначе WebKit увеличивает страницу), поля времени
   стали шире, и содержимое перестало помещаться — вылезало за правый край.
   На узком экране разрешаем перенос и не даём полю раздуваться. */
@media (max-width: 768px) {
  #theme-modal .theme-content { width: min(340px, calc(100vw - 32px)); box-sizing: border-box; }
  #theme-modal .theme-content .row {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 10px;
  }
  #theme-modal .theme-content .row label { white-space: normal; }
  #theme-modal .theme-content .row input[type="time"] {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding: 6px 8px;
  }
  /* переключатель прижимаем вправо, чтобы строка читалась как раньше */
  #theme-modal .theme-content .row .switch { margin-left: auto; }
}

/* ==================== ЛИЧКА НА ТЕЛЕФОНЕ ====================
   Не окно поверх страницы, а подмена содержимого блока чата: разметка лички
   переезжает в #chat-main на место общей ленты. Благодаря этому на неё сами
   собой ложатся все правила общего чата — подгонка высоты, поведение при
   клавиатуре, скрытие лишнего. Отдельному окну пришлось бы всё повторять.
   Класс на body ставит встроитьЛичку() в chat.js. */
@media (max-width: 768px) {
  /* общую ленту и её строку ввода прячем — их место занимает личка */
  body.личка-в-блоке #messages,
  body.личка-в-блоке #chat-main > .input-row { display: none; }

  /* Разметка переехала ИЗ #private-chat-modal, поэтому все стили, привязанные
     к этому идентификатору, перестали действовать: лента лишилась прокрутки,
     флекса и отступов — сообщения вываливались поверх строки ввода и погоды.
     Здесь всё нужное задаётся заново, уже без привязки к окну. */
  body.личка-в-блоке .private-chat-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    flex: 1 1 auto;
    min-height: 0;
  }
  body.личка-в-блоке .private-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;          /* без этого содержимое вылезало наружу */
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-messages);
  }
  body.личка-в-блоке .private-chat-messages .message {
    max-width: 88%;
    margin-bottom: 0;
  }
  body.личка-в-блоке .private-chat-input-row { display: flex; align-items: center; }

  /* Поле ввода тоже потеряло вид при переезде: его стили были привязаны
     к #private-chat-modal. Повторяем оформление общего поля, чтобы личка
     не отличалась от обычной беседы. */
  body.личка-в-блоке .private-chat-input-row input[type="text"] {
    background: var(--input-bg);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 7px 9px;
    font-family: inherit;
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
  }
  body.личка-в-блоке .private-chat-input-row input[type="text"]::placeholder {
    color: var(--text-muted);
  }
  body.личка-в-блоке .private-chat-input-row {
    border-top: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 6px 0 0;
    gap: 6px;
  }
  body.личка-в-блоке .private-chat-input-row .send-btn {
    padding: 8px 12px !important;
    flex: 0 0 auto;
  }
  body.личка-в-блоке .private-chat-input-row input { min-width: 0; flex: 1 1 auto; }
  body.личка-в-блоке .private-chat-header { padding: 0 0 8px; }
}

/* Шапку лички во встроенном виде убираем целиком: её крестик вставал на место
   кнопки «кто в сети», а подпись «Личный чат с N» не нужна — с кем разговор,
   видно по самим сообщениям. Возврат — вкладкой «Общий». */
@media (max-width: 768px) {
  body.личка-в-блоке .private-chat-header { display: none; }
}

/* Пустая переписка: серая плашка по центру вместо чёрного провала */
.личка-пусто {
  margin: auto;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--message-bg);
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.6;
  text-align: center;
  max-width: 80%;
}

/* ==================== ВКЛАДКИ КОМНАТ ====================
   Были 25px высотой при соседней кнопке в 34 — смотрелись мельче, чем
   всё вокруг. Плюс отступы разъезжались: 6px сверху и 16 снизу.
   Растим до высоты соседей и выравниваем зазоры; по ширине запас был
   изрядный — три вкладки занимали 305 из 375. */
@media (max-width: 768px) {
  /* Селектор нарочно из двух классов: выше по файлу лежит «.room-tabs button»,
     и он специфичнее простого «.room-tab» — перебивал бы и кегль, и отступы
     независимо от порядка правил. */
  .room-tabs { gap: 7px; margin-bottom: 0; width: 100%; justify-content: center; }
  .room-tabs .room-tab {
    /* Шрифт почти квадратный: каждый лишний пиксель кегля добавляет пиксель
       ширины на каждую букву. Поэтому надпись растим, а место под неё берём
       у отступов, а не у соседей. Растягивание на всю строку убрано —
       кнопка теперь по размеру надписи, а весь ряд стоит по центру. */
    font-size: 10px;
    padding: 10px 10px;
    min-height: 36px;
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
  }

  /* Зазоры были 6 сверху и 20 снизу. Сводим к одному: снизу складывались
     нижний отступ шапки и верхний у ленты. */
  /* Боковые поля съедали 70px из 375: двадцать у контейнера и пятнадцать
     у шапки, с каждой стороны. На телефоне это расточительно — поджимаем,
     и шире становятся не только вкладки, но и вся переписка. */
  #chat-container { padding-left: 10px; padding-right: 10px; }
  .top-bar {
    margin-bottom: 0;
    padding-bottom: 2px;
    padding-left: 4px;
    padding-right: 4px;
    gap: 10px;
  }
  /* высоту кнопки «кто в сети» равняем по вкладкам, чтобы ряды смотрелись одинаково */
  .users-btn { min-height: 36px; }
  #messages, #cinema-container { margin-top: 8px; }
}

/* ==================== БЕЗ ВЫДЕЛЕНИЯ ПРИ УДЕРЖАНИИ ====================
   На телефоне долгое нажатие — наш собственный жест: флажок в сапёре, выбор
   реакции на сообщении, настройки темы. Браузер же понимает его по-своему и
   лезет выделять текст, а на iOS ещё и всплывает меню «Копировать/Найти».
   Получалось, что каждое удержание кончалось синей подсветкой поверх игры.

   Спрашиваем о возможности, а не об устройстве: hover: none означает, что
   наведения нет, то есть перед нами палец. На компьютере выделение остаётся —
   там оно нужно, чтобы копировать переписку мышью. */
@media (hover: none) {
  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;   /* меню «Копировать» на iOS */
  }

  /* Поля ввода — исключение и не обсуждается: без выделения там нельзя
     поставить курсор, выделить слово и вообще править написанное. */
  input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
}