/* Styling for panels built by shared/lobby_chat.js.
 *
 * The class names `lobby-chat-area` / `lobby-chat-messages` / `lobby-chat-input`
 * are shared with the eleven games that already had a hand-written chat panel,
 * so a game that styles those already gets its own look here for free. These
 * rules are the neutral fallback for the games that never had one, and are
 * written so a game stylesheet loaded afterwards can override them.
 */

.mps-chat {
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  padding: 8px;
  text-align: left;
}

.mps-chat-messages {
  max-height: 120px;
  min-height: 44px;
  overflow-y: auto;
  overflow-wrap: anywhere; /* a 80-char word must not widen the lobby card */
  font-size: 0.85rem;
  line-height: 1.45;
  color: #cfe4f7;
  margin-bottom: 6px;
}

.mps-chat-line b {
  color: #8fd0ff;
  font-weight: 700;
}

.mps-chat-system {
  color: #9aa8b8;
  font-style: italic;
}

.mps-chat-row {
  display: flex;
  gap: 6px;
}

.mps-chat-input {
  flex: 1 1 auto;
  min-width: 0; /* without this a flex input refuses to shrink on a phone */
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #e8f2ff;
  font: inherit;
}

.mps-chat-input:focus {
  outline: none;
  border-color: #6cf;
}

.mps-chat-send {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #e8f2ff;
  font: inherit;
  cursor: pointer;
  /* A comfortable touch target. */
  min-height: 38px;
}

.mps-chat-send:hover {
  background: rgba(255, 255, 255, 0.18);
}

.mps-chat-send:focus-visible {
  outline: 2px solid #6cf;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .mps-chat-messages {
    max-height: 96px;
  }
}