/* Chat. The base element rules are in site.css.
   The chat stays on screen while the page scrolls, because Cameron asked for that. It is
   the one fixed thing on the page. Wide screens: a column on the right, and the page
   keeps clear of it. Narrow screens: a bar at the bottom that opens upward. */
.chat {
  position: fixed;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: #c0c0c0;
  border: 2px solid #000000;
}
.chat > h2 { margin: 0 0 4px; }
.chat__sub { margin: 0 0 8px; }
.chat__body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }

@media (min-width: 1180px) {
  body { padding-right: 344px; }
  .chat { top: 8px; right: 8px; bottom: 8px; width: 328px; padding: 8px; }
  .chat__toggle { display: none; }
}

@media (max-width: 1179px) {
  body { padding-bottom: 56px; }
  .chat {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
    border-width: 2px 0 0;
  }
  .chat > h2 { display: none; }
  .chat__toggle { width: 100%; }
  .chat__body { height: min(60vh, 420px); margin-top: 4px; }
  .chat:not(.chat--open) .chat__body { display: none; }
}

.chat__screen { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
.chat__list {
  flex: 1 1 auto;
  margin: 0;
  padding: 4px 8px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #ffffff;
  border: 1px solid #000000;
}
.chat__list:focus-visible { outline: 1px dotted #000000; outline-offset: -3px; }
.chat__empty { position: absolute; top: 8px; left: 8px; margin: 0; pointer-events: none; }
.chat__empty[hidden] { display: none; }
.chat__msg { padding: 2px 0; overflow-wrap: anywhere; }
.chat__text { white-space: pre-wrap; }

/* Delete is a button that reads as a plain link */
.chat__del {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #0000ee;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.chat__del:active { color: #ff0000; }
.chat__del[hidden] { display: none; }

.chat__form { margin: 8px 0 0; }
.chat__row-in { display: flex; gap: 4px; }
.chat__input { flex: 1 1 auto; min-width: 0; }
.chat__meta { display: flex; justify-content: space-between; gap: 8px; }
.chat__note { margin: 4px 0; min-height: 1.2em; }
.chat__note--err { color: #cc0000; }
.chat__count { flex: none; margin: 4px 0; }
.chat__foot > p, .chat__noname { margin: 8px 0 0; }