/* ===== MOBILE LANDSCAPE (<=950px, touch) ===== */
@media (max-width: 950px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  /* Жёсткая посадка экрана в ландшафте (Chromium mobile) */
  html, body{ height:100%; overflow:hidden; overscroll-behavior:none; -webkit-text-size-adjust:100%; text-size-adjust:100%; touch-action:manipulation; }
  
  /* Grid layout: stage left, vertical footer panel right */
  #screen-app {
    grid-template-columns: 1fr clamp(280px, 30vw, 420px);
    grid-template-rows: 1fr;
    grid-template-areas: "stage footer";
    padding-right: 5px; /* прижимаем правую колонку к краю, оставляя тонкий отступ */
    min-height: 100svh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }
  
  .stage {
    grid-area: stage;
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px; /* симметрия с правой колонкой */
    min-height: 0;
  }
  
  .footer {
    grid-area: footer;
    display: grid;
    grid-template-rows: 1fr; /* основной контент */
    align-items: stretch;
    justify-items: stretch; /* растягиваем контент по ширине колонки */
    position: relative; /* для абсолютного позиционирования точек */
    padding-bottom: 28px; /* резерв под точки */
    min-height: 0;
  }
  
  /* Hide main sidebar - content moved to carousel */
  .sidebar {
    display: none !important;
  }

  /* Footer carousel */
  .foot-swipe {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    justify-self: stretch; /* гарантируем 100% ширину */
    height: auto; /* даём месту для точки снизу */
    min-height: 0;
  }
  .footer > .foot-swipe { align-self: stretch;             padding-bottom: 10px;}
  
  .foot-swipe::-webkit-scrollbar {
    display: none;
  }

  /* Panel width = 100% of carousel viewport (one pane per view) */
  .foot-pane {
    scroll-snap-align: start;
    flex: 0 0 100%;
    min-width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: stretch; /* растягиваем содержимое по высоте */
    justify-content: center;
    padding-top: 10px; /* равномерный верхний отступ как у левой области */
  }
  
  .foot-pane:last-child {
    border-right: none;
  }

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

  /* Sidebar panel styles */
  .foot-pane.pane-connected .list {
    margin: 0;
    padding: 10px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    height: 100%;
  }
  .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);
  }

  /* Show send button */
  .btn.send {
    display: block;
    width: 100%;
  }

  /* Pagination dots */
  .foot-dots { display:flex; justify-content:center; align-items:center; gap:10px; padding:6px 0 0; }

  /* Центровка содержимого правой панели */
  .me-card, .list, .chatbox { width: 92%; max-width: 420px; margin: 0; }
  .footer-right { display:flex; flex-direction:column; height:100%; min-height:0; }
  .footer-left  { display:flex; flex-direction:column; height:100%; min-height:0; }
  .me-card { height:100%; max-height:100%; display:flex; flex-direction:column; justify-content:center; gap:12px; }
  .me-row { display:grid; grid-template-columns:auto 1fr; align-items:center; }
  .me-controls{ margin-top:8px; }
  .leave-btn { margin-top:8px; }
  .chatbox { display: grid; grid-template-rows: 1fr auto; height: 100%; min-height: 0; max-height: none; flex:1; }
  .chat-log { min-height: 0; max-height: none; overflow: auto; }

  /* Для панели настроек оставляем вертикальную центровку */
  .foot-pane.pane-settings { align-items: center; }

  /* me-card: сетка 2x2 с резервом под кнопку разворота (face) в первом ряду */
  .me-controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    grid-template-areas:
      "cam face"
      "mic settings";
    gap:12px;
  }
  #btnCam{grid-area:cam}
  #btnFacing{grid-area:face}
  #btnMic{grid-area:mic}
  #btnSettings{grid-area:settings}
  /* резервируем место даже когда кнопка скрыта */
  .me-controls #btnFacing[hidden]{display:block !important; visibility:hidden}
  /* пятую кнопку (#btnShare) скрываем, чтобы сетка была 2x2 */
  #btnShare{display:none}
  
  .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;
  }

  /* Tiles: mobile mosaic driven by JS (absolute children) */
  .tiles {
    display: block !important;    /* как в портрете */
    height: 100%;
    min-height: 0;
    margin: 0;
    font-size: 14px;
  }

  .tiles-main {
    position: relative;           /* база для absolute-детей */
    min-height: 0;
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: contain;
    touch-action: auto;
    display: block;               /* убираем grid/flex */
    gap: 0;
    height: 100%;
    width: 100%;
    min-width: 0;
  }

  .tile{
    box-sizing: border-box;
    width: 100%;
    height: auto;
    background: var(--panel);
    aspect-ratio: auto;
  }
  .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 .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; }

  /* Снимаем любые наследованные форсированные AR у локальной/аватарных плиток */
  .tile.me, .tile.has-avatar { aspect-ratio: auto !important; }
  .tile video{ width:100%; height:100%; object-fit: contain !important; object-position:center; }

  /* Mini dialog styles duplicated for landscape mobile */
  .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, 92vw); 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; }

  /* 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; right:6px; bottom:6px; font-size:11px; padding:3px 6px; text-align:left; }
  /* В мозаике (мобильной) сохраняем AR внутри одинаковых ячеек */
  .tiles-main.grid-active .tile video,
  .tiles-main.grid-active .tile .media{
    object-fit: contain !important;
    object-position: center;
  }
  
  .tile.me,
  .tile.has-avatar {
    aspect-ratio: auto !important;
  }

  /* Override desktop carousel flattening */
  .foot-swipe { display: flex !important; }
  .foot-pane { display: flex !important; align-items: center; justify-content: center; }
  
  .foot-dots { display:flex !important; position: absolute; left:50%; transform:translateX(-50%); bottom:6px; width:92%; max-width:420px; justify-content:center; gap:10px; padding:0; min-height:28px; visibility: visible !important; }
}

.footer-right {padding: 0;}
.footer-left {padding: 0;}