/* Chat (src/panels/chat.rs): bottom left, in the column the HUD keeps free (left of its combat view, below its sky);
   each line a lacquer plate, yours a lit one, and a compact well to type in. */
#chat { position: fixed; left: 12px; bottom: 12px; width: clamp(240px, calc(20vw - 16px), 440px);
  display: flex; flex-direction: column; gap: 4px; pointer-events: none; font: 14px/1.4 var(--face); }
#chat-log {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;
  max-height: 34vh; overflow: hidden;
  li {
    padding: 3px 9px; border-radius: 2px; background: var(--plate); color: var(--paper);
    overflow-wrap: anywhere; transition: opacity 1.5s;
    &.stale { opacity: 0; }
    &.mine { background: var(--plate-lit); }
  }
  .name { font-weight: 600; }
  /* The client's own lines (where you are, why something was not said) are asides. */
  .from, li.aside { color: var(--muted); }
  li.aside { font-style: italic; }
}
#chat {
  &.open #chat-log { overflow-y: auto; pointer-events: auto; }
  &.open #chat-log li.stale { opacity: 1; }
  .input { display: none; pointer-events: auto; }
  &.open .input { display: flex; }
}
#chat-input { background: var(--plate); }