/* Only what the browser version adds to app/style.css. */

/* Nothing to check on a page that is always the newest version. */
#btn-check-update { display: none; }

/* No camera and no screen to offer: a plain http:// address on a phone. */
.web-watch-only #btn-share,
.web-watch-only .self-controls { display: none; }

/* style.css gives this display:flex, which beats the hidden attribute. */
#audio-field[hidden] { display: none; }

.web-sound-prompt {
  position: fixed;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: 60;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: #f4f2ff;
  color: #14131f;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.web-sound-prompt[hidden] { display: none; }

/* On the join screen, when an invite link was opened on a computer. */
.web-open-app {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  color: #a9d8ff;
}

/* ── A phone ──────────────────────────────────────────────────────────── */

/* A phone has neither of these to share. */
.web-phone .tab[data-filter="screen"],
.web-phone .tab[data-filter="window"] { display: none; }

/* Safari zooms the whole page into any field smaller than this. */
.web-phone .input { font-size: 16px; }

/* There is no hover on a touch screen, so these would never appear. */
.web-phone .tile-bar { opacity: 1; }
.web-phone .tile-bar .icon-btn { width: 36px; height: 36px; }

/* Already on the source screen, and in the way of Leave here. */
.web-phone .self-controls .quality-live { display: none; }

/*
 * One column that scrolls, instead of the desktop's fixed window split.
 *
 * Height counts as well as width: a phone on its side is wide enough to pass
 * for a small desktop, and has no room for the desktop's layout.
 */
@media (max-width: 760px), (max-height: 500px) {
  .view {
    height: 100%;
    overflow-y: auto;
    padding: calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
             calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    gap: 14px;
  }

  .view.centered { justify-content: flex-start; padding-top: calc(64px + env(safe-area-inset-top)); }

  .room-layout { flex: none; display: flex; flex-direction: column; gap: 14px; }
  .grid-area { flex: none; }
  .panel { flex: none; }
  .viewers { flex: none; }
  #btn-panel-toggle { display: none; }

  .stage-head { flex-wrap: wrap; gap: 8px; }
  .stage-head .stat-inline { order: 3; width: 100%; margin-left: 0; }

  /*
   * A height the picture can fill. The desktop's comes from the window; here
   * the page scrolls, so nothing would give the grid any height and it collapses
   * to a strip. layoutGrid() still decides the arrangement inside it, so each
   * extra stream only has to buy itself room.
   */
  .video-grid { flex: none; height: 58vw; }
  .video-grid:has(.tile:nth-child(2)) { height: 118vw; }
  .video-grid:has(.tile:nth-child(3)) { height: 178vw; }

  .source-grid { flex: none; overflow: visible; grid-template-columns: 1fr; }

  .setup-bar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; padding: 16px; }
  /* Named twice to outrank style.css, whose flex: 0 0 300px means a width in a
     row and turns into a fixed height once the bar is a column. */
  .setup-bar .field,
  .setup-bar .field.quality-field { flex: none; width: 100%; min-height: 0; }
  .setup-bar .btn.primary { margin-left: 0; width: 100%; }
  .audio-fields { max-width: none; }
}

/* On its side, one whole stream should fit on screen under a single-row header. */
@media (max-height: 500px) and (orientation: landscape) {
  .stage-head .stat-inline { display: none; }
  .video-grid { height: calc(100vh - 88px); }
  .video-grid:has(.tile:nth-child(2)) { height: calc(200vh - 88px); }
  .video-grid:has(.tile:nth-child(3)) { height: calc(300vh - 88px); }
}