/* The page: the city feed with the chat under it and a row of buttons under that (the "stage", left), the side panel
   (right). The chat and the buttons have their own room, so nothing sits over the feed; the feed gives up a little
   height on a short window rather than let the chat climb over it. Full view and the touch layout are overlays
   again: see the end of this file and fullscreen.css. */

/* The stage is as tall as the window (a definite height, so that the chat row's share of it is one the chat box
   can measure itself against); the stack sits centred in it. */
#stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 936px;
  height: 100vh;
  min-height: 0;
  padding: 12px 0;
  justify-self: start;
}

/* The feed keeps its 3:2 shape: as wide as the column, or as wide as the window's height allows once the chat's
   smallest box (a header and three rows), the buttons and the gaps have their share. */
#stage #viewport {
  flex: none;
  width: min(100%, calc((100vh - 160px) * 1.5));
}

#chat-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 0 1 auto;
  min-height: 0;
}

#net-hud {
  flex: none;
  padding: 8px 10px;
  border: 1px solid rgba(111, 255, 171, .45);
  background: rgba(0, 8, 4, .82);
  color: #b9ffd1;
  font: 11px/1.35 Consolas, "Courier New", monospace;
  white-space: pre;
  pointer-events: none;
}

#net-hud:empty {
  display: none;
}

#dock {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex: none;
}

/* Full view: the feed is the window, so the chat, the link box and the buttons go back to the corners. */
body.full-view #stage {
  display: block;
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  padding: 0;
}

body.full-view #stage #viewport {
  width: min(100vw, 150vh);
  margin: 0 auto;
}

body.full-view:not(.full-view-no-panel) #stage #viewport {
  margin: 0;
}

body.full-view #chat-row {
  position: fixed;
  left: 12px;
  bottom: 76px;
  z-index: 80;
}

body.full-view #net-hud {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 80;
}

body.full-view #dock {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 80;
  flex-direction: column;
  gap: 2px;
}

/* The touch layout fills the window with the feed; the pieces are placed one by one in their own stylesheets. */
body.touch-mode #stage,
body.touch-mode #chat-row,
body.touch-mode #dock {
  display: contents;
}

body.touch-mode #net-hud {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 80;
}

/* A narrow window (the vendor stylesheet stacks the side panel under the feed there and lets the page scroll):
   the stage is as tall as its content and scrolls with the rest. */
@media (max-width: 980px) {
  #stage {
    height: auto;
    padding: 0;
  }

  #stage #viewport {
    width: 100%;
  }
}