/* ==================================================================
   Аккорд · совместимость и мобильная адаптация
   Подключается последним, чтобы перекрывать базовые правила.
   ================================================================== */

/* ------------------------------------------------------------------
   Высота экрана на мобильных
   100vh на телефонах считается без учёта адресной строки — низ уезжает
   под неё. Порядок важен: каждый следующий вариант перекрывает
   предыдущий там, где поддерживается.
   ------------------------------------------------------------------ */

html,
body {
  overscroll-behavior: none; /* без «оттягивания» страницы и pull-to-refresh */
}

/* Экран встречи не прокручивается. Без этого <html> получает вертикальную
   полосу (её высота считается по ICB, а не по body) и та съедает ~15 px
   ширины — на узких телефонах интерфейс уезжает вправо. */
html.room-page {
  height: 100%;
  overflow: hidden;
}

body.room-body {
  height: 100vh;
  height: -webkit-fill-available;
  height: 100dvh;
}

.room {
  height: 100vh;
  height: -webkit-fill-available;
  height: 100dvh;
  /* Без minmax(0,1fr) минимальный размер колонки равен min-content: слишком
     широкая панель управления растянула бы всю сетку и уехала за экран. */
  grid-template-columns: minmax(0, 1fr);
}

.rhead,
.stage,
.dock-wrap {
  min-width: 0;
}

.reactions {
  height: 62vh;
  height: 62dvh;
}

@media (max-width: 620px) {
  .panel {
    height: 74vh;
    height: 74dvh;
  }
}

/* ------------------------------------------------------------------
   Нет поддержки aspect-ratio (Safari до 15)
   ------------------------------------------------------------------ */

.no-aspect .tile {
  height: 210px;
}
.no-aspect .preview {
  height: 62vw;
  max-height: 420px;
}
@media (min-width: 900px) {
  .no-aspect .preview {
    height: 340px;
  }
}

/* ------------------------------------------------------------------
   Нет поддержки gap во flex (Safari до 14.1)
   Класс ставит JS: @supports здесь врёт, потому что grid-gap работает.
   ------------------------------------------------------------------ */

.no-flexgap .dock > * + * {
  margin-left: 8px;
}
.no-flexgap .rhead > * + * {
  margin-left: 12px;
}
.no-flexgap .rhead .acts > * + * {
  margin-left: 8px;
}
.no-flexgap .topbar > * + * {
  margin-left: 12px;
}
.no-flexgap .vt .name > * + * {
  margin-left: 8px;
}
.no-flexgap .vt .badges > * + * {
  margin-left: 6px;
}
.no-flexgap .stage.spot .strip > * + * {
  margin-left: 10px;
}
.no-flexgap .composer > * + * {
  margin-left: 8px;
}
.no-flexgap .p-row > * + * {
  margin-left: 12px;
}
.no-flexgap .list-item > * + * {
  margin-left: 13px;
}
.no-flexgap .msg > * + * {
  margin-left: 10px;
}
.no-flexgap .hue-row > * {
  margin: 0 9px 9px 0;
}
.no-flexgap .react-bar > * + * {
  margin-left: 4px;
}
.no-flexgap .menu-list > * + * {
  margin-top: 2px;
}
.no-flexgap .menu-item > * + * {
  margin-left: 12px;
}
.no-flexgap .preview .pv-dock > * + * {
  margin-left: 9px;
}
.no-flexgap .sheet .actions > * + * {
  margin-left: 10px;
}
.no-flexgap .opt-row > * + * {
  margin-left: 14px;
}
.no-flexgap .mic-panel > * + * {
  margin-top: 12px;
}
.no-flexgap .mic-meters > * + * {
  margin-top: 7px;
}
.no-flexgap .mic-row > * + * {
  margin-left: 11px;
}
.no-flexgap .mic-foot > * + * {
  margin-left: 9px;
}

/* ------------------------------------------------------------------
   Нет backdrop-filter (старые Firefox, Android WebView)
   Тогда просто делаем фон плотнее, иначе текст нечитаем.
   ------------------------------------------------------------------ */

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .dock {
    background: rgba(18, 18, 22, 0.96);
  }
  .chip {
    background: rgba(0, 0, 0, 0.72);
  }
  .chip.light {
    background: rgba(70, 70, 80, 0.92);
  }
  .seg {
    background: rgba(38, 38, 44, 0.96);
  }
  .toast {
    background: rgba(26, 26, 31, 0.98);
  }
  .vt .name {
    background: rgba(0, 0, 0, 0.72);
  }
  .preview .pv-dock {
    background: rgba(22, 22, 27, 0.96);
  }
  .menu {
    background: rgba(22, 22, 27, 0.97);
  }
  .tile .plus {
    background: rgba(255, 255, 255, 0.18);
  }
  .scrim {
    background: rgba(0, 0, 0, 0.86);
  }
}

/* ------------------------------------------------------------------
   Сенсорный ввод
   ------------------------------------------------------------------ */

button,
.circle,
.tile,
.list-item,
.opt-row,
.hue-dot,
.seg button {
  touch-action: manipulation; /* без задержки 300 мс и зума по двойному тапу */
}

/* На тач-устройствах :hover «залипает» после нажатия — отключаем */
.is-touch .tile:hover {
  transform: none;
  filter: none;
}
.is-touch .circle:hover {
  background: var(--glass);
}
.is-touch .dock .circle:hover {
  background: rgba(255, 255, 255, 0.09);
}
.is-touch .list-item:hover,
.is-touch .opt-row:hover {
  background: var(--glass);
}

/* Минимальный размер цели нажатия */
.is-touch .circle.sm {
  width: 42px;
  height: 42px;
}
.is-touch .react-bar button {
  width: 46px;
  height: 46px;
}
/* Палец толще курсора: пункт меню должен быть не ниже 48 px, иначе в него
   попадают через раз. */
.is-touch .menu-item {
  padding: 13px 12px;
}

/* Поле ввода меньше 16px заставляет iOS зумить страницу при фокусе */
.is-ios .field,
.is-ios .composer textarea,
.is-ios input,
.is-ios textarea,
.is-ios select {
  font-size: 16px;
}

/* ------------------------------------------------------------------
   Экранная клавиатура (visualViewport)
   --kb выставляет JS: высота клавиатуры, перекрывающей вьюпорт.
   ------------------------------------------------------------------ */

@media (max-width: 620px) {
  .panel {
    bottom: var(--kb, 0px);
    transition: transform 0.44s var(--ease), bottom 0.2s linear;
  }
}

/* ------------------------------------------------------------------
   Телефон: панель управления
   ------------------------------------------------------------------ */

/* Пункты меню, которых может не быть на этом устройстве.
   Осторожно: эта таблица подключена ко всем страницам, и правила по
   идентификатору действуют на них разом — одноимённая кнопка на другой
   странице однажды оказалась спрятана, и найти это можно было только через
   инспектор. Поэтому правило написано по классу. */

/*
 * Демонстрация экрана — только на десктопе.
 *
 * Два условия, а не одно. Первое — честная проверка возможностей: без
 * getDisplayMedia показывать нечего (класс ставит markEnvironment). Второе —
 * телефон: даже если браузер однажды заявит поддержку, показывать экран
 * телефона на деловой встрече незачем, а место в панели из четырёх кнопок
 * стоит дорого.
 */
.no-screenshare #screenBtn,
.is-mobile #screenBtn {
  display: none;
}

@media (max-width: 560px) {
  .dock {
    gap: 6px;
    padding: 7px;
  }
  .dock .circle {
    width: 46px;
    height: 46px;
  }
  .dock .circle svg {
    width: 20px;
    height: 20px;
  }
  .dock .circle.hangup {
    width: 56px;
  }
  .dock .sep {
    margin: 0 1px;
  }
  .dock-wrap {
    padding: 6px 8px calc(10px + env(safe-area-inset-bottom));
  }
}

/*
 * Самый узкий телефон: 320 px.
 *
 * Кнопок в панели стало больше — к микрофону, камере и выходу добавились три
 * шага сделки, — и на 320 px они перестали помещаться. Панель прокручивается,
 * но полагаться на это нельзя: за правый край уезжает «Завершить», то есть
 * выйти из встречи становится нечем, пока не догадаешься панель протащить.
 * Ровно эта беда здесь уже была однажды, и повторять её из-за новых кнопок
 * тем более незачем.
 *
 * Поэтому на такой ширине отсюда уходит всё, что можно убрать без потери
 * смысла: разделители (сегмент сделки и так отделён собственной заливкой),
 * пара пикселей у кружков и промежутков. Считано под телефон, где
 * демонстрации экрана нет: 44 + 44 + сегмент + 52 плюс отступы укладываются
 * в 304 px с запасом.
 *
 * Порог именно 360, а не 400: от 360 и выше панель помещается и в обычных
 * размерах, а ужимать её там значит отбирать у пальца площадь просто так.
 */
@media (max-width: 359px) {
  .dock {
    gap: 5px;
  }
  .dock .sep {
    display: none;
  }
  .dock .circle {
    width: 44px;
    height: 44px;
  }
  .dock .circle.hangup {
    width: 52px;
  }
  .deal-step {
    min-width: 40px;
    padding: 0 3px;
  }
}

/*
 * Узкие экраны: тесно теперь не внизу, а в шапке.
 *
 * В панели осталось три кнопки, и они укладываются даже в 320 px с запасом.
 * А вот в шапке кружков стало четыре — «назад», ссылка, раскладка и «ещё», — и
 * вместе с названием встречи они впритык. Ужимаем именно их, чтобы название не
 * схлопнулось в многоточие с первой буквы.
 */
@media (max-width: 380px) {
  .rhead {
    gap: 6px;
  }
  .rhead .acts {
    gap: 6px;
  }
  .rhead .circle {
    width: 40px;
    height: 40px;
  }
  .rhead .circle svg {
    width: 18px;
    height: 18px;
  }
  .dock-wrap {
    padding: 6px 6px calc(8px + env(safe-area-inset-bottom));
  }
}

/* iPhone SE и прочие 320 px: шесть реакций по 40 px с зазорами и отступами
   укладываются в ширину меню. С прежними 46 px не укладывались. */
@media (max-width: 344px) {
  .react-bar button,
  .is-touch .react-bar button {
    width: 40px;
    height: 40px;
  }
  .react-bar button {
    font-size: 19px;
  }
}

/* ------------------------------------------------------------------
   Телефон: остальное
   ------------------------------------------------------------------ */

@media (max-width: 620px) {
  .rhead {
    padding: calc(8px + env(safe-area-inset-top)) 12px 6px;
    gap: 8px;
  }
  .rhead .title b {
    font-size: 15.5px;
  }
  .rhead .title span {
    font-size: 11.5px;
  }
  .stage {
    padding: 4px 10px;
    gap: 8px;
  }
  .vt {
    border-radius: 22px;
  }
  .vt .name {
    left: 8px;
    bottom: 8px;
    height: 27px;
    padding: 0 10px;
    font-size: 11.5px;
    max-width: calc(100% - 16px);
  }
  .vt .badges {
    right: 8px;
    top: 8px;
  }
  .vt .badges .chip {
    height: 24px;
    font-size: 10.5px;
    padding: 0 9px;
  }
  .stage.spot .strip {
    height: 92px;
  }
  .stage.spot .strip .vt {
    width: 132px;
  }
  .app {
    padding: calc(10px + env(safe-area-inset-top)) 12px calc(30px + env(safe-area-inset-bottom));
  }
  .grid {
    gap: 10px;
  }
  /*
   * Телефон: два столбца, как в референсе. Плитка там чуть выше своей ширины
   * (примерно 1 : 1.18) — на квадратной подпись из двух строк прижималась
   * вплотную к рисунку. min-height оставлен маленьким нарочно: высоту должно
   * задавать соотношение сторон, иначе на узком экране плитка растягивается.
   */
  .tile {
    border-radius: 26px;
    aspect-ratio: 1 / 1.18;
    min-height: 150px;
    padding: 12px 10px 16px;
  }
  .tile .art {
    bottom: 54px;
  }
  .tile .cap b {
    font-size: 14px;
  }
  .tile .cap span {
    font-size: 11.5px;
  }
  .page-title {
    margin: 22px 4px 18px;
  }
  .page-sub {
    margin: -12px 6px 18px;
    font-size: 13px;
  }
}

/* Совсем узкие экраны — сетка плиток в один столбец слишком крупная,
   оставляем два, но ужимаем содержимое */
@media (max-width: 340px) {
  .tile {
    min-height: 148px;
  }
  .tile .art {
    bottom: 54px;
  }
  .seg button {
    padding: 0 13px;
    font-size: 13.5px;
  }
}

/* ------------------------------------------------------------------
   Телефон в горизонтальной ориентации
   Высоты мало: ужимаем шапку и панель, чтобы видео осталось место.
   ------------------------------------------------------------------ */

@media (max-height: 480px) and (orientation: landscape) {
  .rhead {
    padding: calc(4px + env(safe-area-inset-top)) 12px 2px;
    height: auto;
  }
  .rhead .title span,
  .rhead .timer {
    display: none;
  }
  .rhead .circle {
    width: 38px;
    height: 38px;
  }
  .rhead .circle svg {
    width: 17px;
    height: 17px;
  }
  .dock-wrap {
    padding: 4px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .dock .circle {
    width: 40px;
    height: 40px;
  }
  .dock .circle svg {
    width: 18px;
    height: 18px;
  }
  .dock .circle.hangup {
    width: 50px;
  }
  .stage {
    padding: 2px 8px;
    gap: 6px;
  }
  .stage.spot .strip {
    height: 74px;
  }
  .stage.spot .strip .vt {
    width: 108px;
  }
  .prejoin {
    padding: calc(8px + env(safe-area-inset-top)) 12px 16px;
  }
  .prejoin .page-title {
    font-size: 26px;
    margin: 10px 4px 10px;
  }
  .pj-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    margin-top: 12px;
  }
}

/* ------------------------------------------------------------------
   Экран подготовки на телефоне
   ------------------------------------------------------------------ */

@media (max-width: 620px) {
  .prejoin {
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom));
  }
  .pj-grid {
    gap: 14px;
    margin-top: 16px;
  }
  .pj-card {
    padding: 16px;
    border-radius: 26px;
  }
  .pj-card h2 {
    font-size: 20px;
  }
  .preview {
    border-radius: 26px;
  }
  .field {
    height: 52px;
    border-radius: 18px;
  }
  .btn {
    height: 52px;
  }
  .opt-t span {
    font-size: 12px;
  }
}

/* ------------------------------------------------------------------
   Печать и прочие крайние случаи
   ------------------------------------------------------------------ */

@media print {
  .dock-wrap,
  .panel,
  .menu,
  .reactions,
  .prejoin {
    display: none !important;
  }
}