/* ═══════════════════════════════════════════════════════
   ТЕЛЕФОН И ПЛАНШЕТ (29.09) — по скриншотам с телефона:
   кнопки шапки уезжали за край, плашки наслаивались на окна и плитки,
   админка была шире экрана.
   Правило: на ШИРОКОМ экране всё как раньше. Обёртка кнопок .top-actions
   там «прозрачна» (display:contents), а порядок кнопок задан явно.
   ═══════════════════════════════════════════════════════ */

/* ── Широкий экран: как до правки ─────────────────────── */
.top-menu-btn{display:none}
.top-actions{display:contents}
.dl-toggle{display:none}
/* лобби: ADMIN ✉ ☀ ВЫЙТИ — тот же порядок, что был в разметке */
#btn-admin-lobby{order:1}
.lobby-dm-btn{order:2}
#lobby-actions [data-action="toggleTheme"]{order:3}
#lobby-actions [data-action="doLogout"]{order:4}
/* комната: … ТЕХПОДДЕРЖКА СТРИМ ЗАПИСЬ ВЫЙТИ — ВЫЙТИ последним, как было */
#room-actions [data-action="leaveRoom"]{order:1}
/* в Android-приложении скачивать приложения незачем */
html.in-app .dl-dock{display:none!important}
/* 30.09: в ПК-приложении (html.in-desktop, theme-init.js) — без карточки
   «WINDOWS APP»: сам себя качать незачем. APK и «OBS КОНФИГ» остаются.
   !important — у карточек display:flex задан в разметке. */
html.in-desktop .dl-card[href*="VaryagLive_Setup"]{display:none!important}

/* ── Узкий экран ──────────────────────────────────────── */
@media (max-width:860px){
  /* Шапки: одна строка, без размытия (оно ломает выпадающее меню). */
  .topbar,.room-topbar{-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible}
  .topbar{flex-wrap:nowrap;min-height:52px;padding:8px 10px;gap:8px}
  .topbar .sep{order:0;flex:1 1 auto;flex-basis:auto;height:auto}
  .topbar-logo{font-size:15px;gap:8px}
  #user-name-label{max-width:28vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .admin-panel-label{display:none}
  .room-topbar{flex-wrap:nowrap;overflow:visible;padding:6px 8px;gap:6px}
  /* разделитель — после названия комнаты (order:2, как у названия), иначе он
     уходит в начало ряда и прижимает всё вправо */
  .room-topbar .sep{display:block;flex:1 1 auto;min-width:0;order:2}
  /* от логотипа в комнате — только значок «В»: место нужно кнопкам */
  .room-topbar .room-topbar-logo{font-size:0;gap:0}
  .room-topbar .room-name-label{flex-shrink:1;min-width:0;max-width:38vw;padding-left:8px;font-size:12px}
  .room-topbar .btn-red{padding:6px 8px!important}

  /* Кнопка «⋮» и выпадающее меню */
  .top-menu-btn{display:inline-flex;align-items:center;justify-content:center;order:9;
    min-width:40px;height:34px;font-size:20px!important;padding:0 10px!important;line-height:1}
  /* absolute от шапки (у неё position:relative), а не fixed: экраны
     появляются с анимацией transform, и fixed считался бы от экрана. */
  .top-actions{display:none;position:absolute;top:calc(100% + 6px);right:8px;z-index:160;
    flex-direction:column;align-items:stretch;gap:6px;
    min-width:230px;max-width:calc(100vw - 16px);max-height:calc(100vh - 80px);overflow-y:auto;
    padding:10px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;
    box-shadow:0 14px 40px rgba(0,0,0,.55)}
  .top-actions.open{display:flex}
  /* display БЕЗ !important: app.js прячет ADMIN у не-админа инлайном
     display:none — он должен побеждать, иначе ADMIN всплывёт в меню у всех */
  .top-actions>button{order:0!important;display:flex;align-items:center;gap:10px;width:100%;
    text-align:left;justify-content:flex-start;font-size:13px!important;padding:11px 14px!important;
    line-height:1.2!important;white-space:nowrap}
  #room-actions [data-action="leaveRoom"],
  #lobby-actions [data-action="doLogout"],
  #admin-actions [data-action="doLogout"]{order:9!important}
  /* у кнопок-значков в меню — подпись */
  .top-actions [data-mlabel]::after{content:attr(data-mlabel);font-size:13px;letter-spacing:.04em}
  /* красная точка на «⋮», если внутри есть непрочитанное (ADMIN) */
  .topbar:has(#admin-lobby-badge[style*="inline-block"]) .top-menu-btn{position:relative}
  .topbar:has(#admin-lobby-badge[style*="inline-block"]) .top-menu-btn::after{content:'';position:absolute;
    top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:var(--red)}

  /* Плашка «скачать приложения»: кружок ⬇, по нажатию — карточки. */
  .dl-dock{right:12px!important;bottom:12px!important;align-items:flex-end}
  .dl-dock .dl-card{display:none!important}
  .dl-dock.open .dl-card{display:flex!important}
  .dl-toggle{display:flex;order:9;align-items:center;justify-content:center;width:44px;height:44px;
    border-radius:50%;background:var(--surface);border:1px solid var(--border2);color:var(--text2);
    font-size:18px;box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:pointer}
  .dl-dock.open .dl-toggle{color:var(--red);border-color:var(--red)}

  /* Плитки: подписи мельче, чтобы не закрывали картинку. */
  .tile-status{font-size:9px!important;padding:2px 6px!important;left:4px!important;bottom:4px!important;
    max-width:calc(100% - 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tile-group-badge{font-size:9px;padding:1px 5px;top:4px;right:4px}
  .tile-user{font-size:11px}
  .tile-q{font-size:8px;padding:1px 4px}
  .tile-top{padding:4px 6px;gap:5px}
  .tile-bottom{padding:4px 6px}

  /* Сетка на весь экран: кнопка выхода — в своей полоске, не на плитке. */
  #room-screen.grid-fs .streams-area{padding-top:34px}
  #room-screen.grid-fs .grid-fs-exit{top:4px;right:8px;padding:4px 12px;font-size:11px}

  /* Админка: таблицы и вкладки прокручиваются внутри себя, страница — нет. */
  .admin-body{padding:14px 10px;overflow-x:hidden}
  .admin-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .admin-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .admin-tabs::-webkit-scrollbar{display:none}
  .admin-tab-btn{flex-shrink:0;padding:10px 12px!important}
  #admin-stats-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  #admin-stats-cards .stat-card{padding:10px!important}
  .admin-header{flex-wrap:wrap;gap:10px}
}