/* The chat box (net-client.js): under the city feed, in the chat row of the stage (layout.css), on screen the whole
   time. The header says what Enter does, the log holds the last lines said, the line is what is typed. The box takes
   the room the row gives it and no more: when that is less than its lines need, the log gives way first. */

#chat-box {
  display: flex;
  flex-direction: column;
  width: min(46ch, 100%);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(111, 255, 171, .45);
  background: rgba(0, 8, 4, .82);
  color: #b9ffd1;
  font: 12px/1.4 Consolas, "Courier New", monospace;
  pointer-events: none;
}

#chat-box.typing {
  border-color: #6fffab;
}

#chat-head {
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: .06em;
  opacity: .8;
}

/* Eight rows at most, whatever is said: long lines wrap, and what no longer fits is clipped off the top, so the
   newest text is always the part on screen and the box never grows over the feed. */
#chat-log {
  display: flex;
  flex: 0 1 auto;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-end;
  max-height: calc(8 * 1.4em + 8px);
  overflow: hidden;
  padding: 4px 8px;
  border-top: 1px solid rgba(111, 255, 171, .22);
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 0 4px rgba(0, 0, 0, .9);
}

/* The line shows the tail of a long draft (net-client.js), so three rows is a backstop, not the rule. */
#chat-line {
  flex: none;
  max-height: calc(3 * 1.4em + 8px);
  overflow: hidden;
  padding: 4px 8px;
  border-top: 1px solid rgba(111, 255, 171, .22);
  color: #fff;
  background: rgba(0, 20, 10, .92);
  white-space: pre-wrap;
  word-break: break-word;
}

#chat-log[hidden],
#chat-line[hidden] {
  display: none;
}

/* The touch layout keeps that corner for its movement stick: the box goes top-right, under the wallet button. */
body.touch-mode #chat-box {
  position: fixed;
  right: 12px;
  top: 48px;
  z-index: 80;
  width: min(36ch, calc(100vw - 24px));
  max-height: none;
}