/* Chat styling — RAGEMP-style bottom-left log + input box, on a transparent page. */
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: transparent; overflow: hidden;
  font-family: "Segoe UI", Verdana, sans-serif; user-select: none;
}
#chat {
  position: absolute; left: 18px; bottom: 60px; width: 38%; max-width: 640px;
}
#chat_messages {
  list-style: none; margin: 0; padding: 0;
  /* newest appended at the DOM end; pin the log to the bottom so the newest line is always
     visible and the OLDEST (top) is what gets clipped when the box is full. */
  display: flex; flex-direction: column; justify-content: flex-end;
  max-height: 240px; overflow: hidden;
}
#chat_messages li {
  color: #fff; font-size: 14px; line-height: 1.45;
  text-shadow: 1px 1px 2px rgba(0,0,0,.9);
  padding: 1px 6px; word-wrap: break-word;
}
/* the input box (added/removed by chat.js when typing) */
#chat_input_wrap {
  margin-top: 4px; background: rgba(0,0,0,.55); border-radius: 3px; padding: 4px 6px;
}
#chat_input {
  width: 100%; box-sizing: border-box; border: 0; outline: 0;
  background: transparent; color: #cfe8ff; font-size: 14px;
}
/* RAGEMP-style ~color~ classes (mapped by chat.js) */
.c-r{color:#e04b4b}.c-g{color:#46c463}.c-b{color:#4b8be0}.c-y{color:#e6c84b}
.c-w{color:#fff}.c-p{color:#c46bd6}.c-o{color:#e08b3a}