.chat {
  margin: 0.8em 1em 1.2em;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 #000;
  font-family: vtFont, "Courier New", monospace;
  display: flex;
  flex-direction: column;
}

.chat__bar {
  background: #fff;
  color: #000;
  border-bottom: 2px solid #000;
  font-size: 0.85em;
  line-height: 1.6em;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0 0.5em;
  position: relative;
}
.chat__bar::before,
.chat__bar::after {
  content: "";
  flex: 1;
  min-width: 0;
  height: 0.45em;
  background: repeating-linear-gradient(
    to bottom,
    #000 0 1px,
    transparent 1px 3px
  );
}

.chat__log {
  list-style: none;
  margin: 0;
  padding: 0.4em 0.6em;
  display: flex;
  flex-direction: column;
  height: 14em;
  overflow: hidden;
  font-size: 0.8em;
  line-height: 1.3;
}

.chat__log > li::before {
  content: none;
}

.chat__msg {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.1em 0;
  animation: chat-fade 260ms ease-out;
}

@keyframes chat-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat__time {
  color: #666;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.chat__user {
  background: #000;
  color: #fff;
  padding: 0 0.35em;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
  white-space: nowrap;
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat__body {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

/* the Portalis relay: the company's colours on its nick, and its lines a
   shade quieter than the members', like a notice pinned between posts */
.chat__msg--corp .chat__user { color: #45f0ff; }
.chat__msg--corp .chat__body { color: #333; font-style: italic; }

.chat__mention {
  color: #1a8a3a;
  font-weight: bold;
  margin-right: 0.25em;
}

/* a STRATA :: DRIFT city, linked into the game */
.chat__city,
.chat__city:visited {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
}
.chat__city:hover,
.chat__city:focus-visible {
  background: #1a8a3a;
  color: #fff;
  text-decoration: none;
  outline: none;
}

/* the zoom box: a window's maximise square sat on the bar's stripes, a
   white margin round it so the stripes stop short. filled in when open */
.chat__max {
  position: absolute;
  right: 0.35em;
  top: 50%;
  width: 1.15em;
  height: 1.15em;
  margin-top: -0.575em;
  padding: 0;
  border: 2px solid #000;
  background: #fff;
  box-shadow: 0 0 0 0.3em #fff;
  cursor: pointer;
}
.chat__max::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 0.35em;
  height: 0.35em;
  border: 1px solid #000;
}
.chat__max:hover,
.chat__max:focus-visible { background: #000; outline: none; }
.chat__max:hover::after,
.chat__max:focus-visible::after { border-color: #fff; }
.chat--full .chat__max::after { inset: 1px; width: auto; height: auto; background: #000; }
.chat--full .chat__max:hover::after,
.chat--full .chat__max:focus-visible::after { background: #fff; }

/* full screen: the board over the page, under the toolbars (toolbars.js
   keeps --tb-h), and the page held still behind it */
body.home-page > .chat.chat--full {
  position: fixed;
  z-index: 50;
  inset: var(--tb-h, 0px) 0 0 0;
  width: auto;
  margin: 0;
  box-shadow: none;
  border-width: 2px 0 0;
}
.chat--full .chat__log {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow-y: auto;
  font-size: 0.9em;
}
html.chat-full,
html.chat-full body { overflow: hidden; }

@media (max-width: 640px) {
  .chat {
    margin: 0.6em 1em 1em;
    box-shadow: 3px 3px 0 #000;
  }
  /* taller on a phone: it's the page's liveliest panel, near the top now */
  .chat__log {
    height: min(55vh, 26em);
    font-size: 0.85em;
  }
  .chat__user {
    max-width: 7em;
  }
}

/* wide screens: the board leaves the stack for a column of its own, beside
   it from the packages down, then held in view as the page scrolls. the
   page becomes a grid (820 stack, 24 gap, 340 column, centred as one); grid
   items' margins don't collapse, so the stack drops its top margins and
   keeps the bottom ones, which were the larger of each pair already */
@media (min-width: 1240px) {
  body.home-page {
    display: grid;
    grid-template-columns: 1fr 820px 24px 340px 1fr;
    align-items: start;
  }
  body.home-page > .endow { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; }
  body.home-page > .masthead { grid-column: 2 / 5; grid-row: 2; width: auto; margin: 1.2em 0 0.8em; }
  body.home-page > aside[id] { grid-column: 2; width: auto; margin: 0 0 1.2em; }
  body.home-page > aside.chat {
    grid-column: 4;
    grid-row: 3 / span 20;
    position: sticky;
    top: calc(var(--tb-h, 0px) + 1em);
    height: calc(100vh - var(--tb-h, 0px) - 2.2em);
    margin: 0;
  }
  .chat__log {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #000 #fff;
  }
  .chat__max { display: none; }
}

/* narrow boards (the column, a phone): the time and nick head the post on a
   line of their own, so the text gets the full width instead of hanging
   off a deep indent */
@media (min-width: 1240px), (max-width: 640px) {
  .chat__msg { flex-wrap: wrap; row-gap: 0.15em; padding: 0.3em 0; }
  .chat__msg + .chat__msg { border-top: 1px dotted #999; }
  .chat__body { flex-basis: 100%; }
  .chat__user { max-width: none; }
}

/* forum smilies (smilies.js): drawn at 1:1, pixels kept hard */
.chat__body .smi {
  vertical-align: -0.2em;
  image-rendering: pixelated;
  margin: 0 0.1em;
}