/* ===== Mobile Portrait (<=640px) — overrides only ===== */
/* Link with: media="(max-width: 640px) and (orientation: portrait)" */

/* Жёсткая посадка экрана на iOS/Chrome(iOS) в этом режиме */
html, body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

#screen-app{
  grid-template-columns:1fr;
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:
    "stage"
    "footer";
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;
  overflow:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}

.sidebar{display:none !important}
@supports not (height:100dvh){
  #screen-app{ height:calc(var(--vh, 1vh) * 100); }
}

.stage{grid-area:stage; padding-top:10px; padding-bottom: 0; min-height:0; overflow:hidden}
.topbar{padding:0; padding-bottom:10px; padding-left:10px}

.tile .name{top:10px; bottom:unset}

/* === Tiles-контейнеры =================================================== */

/* Корневой контейнер плиток — обычный блок (раньше была «лента») */
.tiles{
  display:block !important;           /* не grid и не flex — не мешаем абсолютам детей */
}

/* Рабочая область плиток. Её позиционирует мозаика (JS). */
.tiles-main{
  position:relative;                   /* база для absolute-детей */
  min-height:0;
  overflow:hidden;                     /* горизонталь нам не нужна в мозаике */
  -webkit-overflow-scrolling:auto;
  overscroll-behavior:contain;
  touch-action:auto;
  /* ВАЖНО: никаких display:grid/flex — иначе могут быть побочки.
     Если где-то остался старый стиль, перекрываем: */
  display:block;
  gap:0;                               /* gap grid-а не нужен абсолютам */
}

/* Фолбэк для тайла до прихода JS (чтобы не было белого экрана).
   После расчёта мозаика задаёт width/height/left/top инлайнами. */
.tile{
  min-height:0;
  flex:none;
  width:100%;
  height:auto;
  aspect-ratio:auto;                   /* не навязываем 16:9 до расчёта JS */
  scroll-snap-align:unset;
  background: var(--panel);
  /* не позволяем внутренним элементам задавать свои aspect-ratio */
  contain: layout paint;
}
.tile.has-video{ background: transparent; }
.tile.has-video .vol{ display:none !important; }
.tile.has-video .name{ background: rgba(0,0,0,.45); text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events:none; }
.tile .controls{display:none !important}
/* было: object-fit: cover; */
.tile video { width:100%; height:100%; object-fit: contain !important; object-position:center; }
.tile .fs-btn{
  position:absolute; right:6px; top:6px; z-index:3;
  width:30px; height:30px; display:grid; place-items:center;
  border:1px solid var(--line); background:#1f2329; color:#fff; border-radius:8px;
  cursor:pointer; opacity:.9;
}
.tile:not(.has-video) .fs-btn{ display:none; }
.mini-dlg{ position:fixed; inset:0; z-index:1200; display:none; }
.mini-dlg.open{ display:block; }
.mini-dlg .mini-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(4px); }
.mini-dlg .mini-panel{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:min(520px, 60vw); max-height:min(80vh, 580px); border:1px solid var(--line); border-radius:16px; background:rgba(30,32,36,.95); box-shadow: var(--shadow);
  color:#fff; overflow:hidden; padding-bottom: env(safe-area-inset-bottom, 0px); }
.mini-dlg .mini-head{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:rgba(255,255,255,.06); }
.mini-dlg .mini-title{ font-weight:600; }
.mini-dlg .mini-close{ margin-left:auto; width:28px; height:28px; border-radius:8px; border:1px solid #444; background:#1f2329; color:#fff; }
.mini-dlg .mini-body{ padding:12px; display:grid; gap:12px; }
.mini-dlg .mini-row{ display:grid; gap:6px; font-size:14px; }

/* В мозаике (мобильной) сохраняем AR внутри одинаковых ячеек */
.tiles-main.grid-active .tile video,
.tiles-main.grid-active .tile .media{
  object-fit: contain !important;
  object-position: center;
}

/* Mini tiles (20% area): hide controls, keep only name */
.tile.mini .vol { display:none !important; }
.tile.mini .controls { display:none !important; }
  .tile.mini .name { left:6px; font-size:11px; padding:3px 6px; text-align:left; }

/* Кастомный скроллбар плиток — в портретной мозаике скрыт */
.tiles-sbar{ display:none !important }

/* ===== Footer as swipe carousel (портрет: 3 панели) ====================== */
.footer{
  grid-area:footer;
  display:block;
  padding-bottom:env(safe-area-inset-bottom);
  min-width:0;
}

/* Порядок панелей - убираем CSS order, используем DOM порядок */
.foot-pane.pane-connected { 
  display:block !important; /* Явно показываем панель на мобильных */
}

.foot-pane:last-child{border-right:none}
.footer-left{padding:0; border-right:none}
.footer-right{padding:0}
.chatbox{margin:0; height:100%; display:grid; grid-template-rows:1fr auto; min-height:0; max-height:none}
.chat-log{min-height:180px; max-height:none; overflow:auto}
#btnShare{display:none !important}

/* Prevent iOS zoom on inputs: ensure >=16px in portrait */
input, select, textarea, button, .input{
  font-size:16px !important;
}

/* Список участников в карусели */
.foot-pane.pane-connected .list{
  margin:0;
  padding:10px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  min-height:200px;
}
.foot-pane.pane-connected .list h3{
  margin:6px 6px 10px;
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
#onlineList{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.user{
  padding:8px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:12px;
  gap:8px;
}
.user:hover{background:rgba(255,255,255,.03)}

/* Мобильная карусель */
.foot-swipe{
  display:flex;
  width:100%;
  min-width:0;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior:contain;
  touch-action:pan-x;
  gap:0;
  scroll-padding-inline:0;
  box-sizing:border-box;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.foot-swipe::-webkit-scrollbar{display:none}

.foot-pane{
  flex:0 0 100%;
  width:auto;
  min-width:0;
  height:100%;
  box-sizing:border-box;
  padding:12px 12px 0 12px;

  scroll-snap-align:start;
  scroll-snap-stop:always;

  overflow-y:hidden;
  overscroll-behavior-y:none;
}

/* Пейджер */
.foot-dots{
  display:flex; justify-content:center; align-items:center;
  gap:10px; padding:5px;
}
.foot-dots .fdot{
  width:12px; height:16px; border-radius:50%;
  background:transparent; border:2px solid var(--dots);
  opacity:.85; transform:scale(.95);
  transition:transform .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease;
}
.foot-dots .fdot.active{
  background:var(--dots); border-color:var(--dots);
  opacity:1; transform:scale(1.1);
}
.foot-dots .fdot:focus-visible{
  outline:2px solid rgba(255,255,255,.6); outline-offset:2px;
}
/* Мозаика: размеры задаёт JS через CSS-переменные */
.tiles-main.mosaic-active .tile{
  position:absolute;                /* на всякий случай, если где-то переопределили */
  width: var(--mw) !important;      /* размеры, проставленные из JS */
  height: var(--mh) !important;
  box-sizing: border-box;           /* чтобы рамки/паддинги не раздували тайл */
}

/* Унификация: чтобы "моя" плитка не была больше из-за рамки/паддингов */
.tile{ box-sizing:border-box; }
/* если у .tile.me где-то толще border — выровняйте: */
.tile.me{ border-width:1px; padding:0; }  /* по необходимости; без width/height! */
/* Иконки/превью тоже заполняют контейнер */
.tile img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}
/* чтобы centering работал предсказуемо */
.tiles-main{
  position: relative;   /* уже есть, но не помешает */
  height: 100%;         /* контейнеру-родителю дай высоту через грид (у тебя так) */
  min-height: 0;
}