/* ─── Inline chat (lobby panel) ──────────────────────────────────────────────── */

/* The chat-panel script builds a .brass-chat tree at runtime; we style it from
   the parallax stylesheet so it inherits the brass-themed surroundings. The
   compose row is pinned to the bottom of the column (the messages list grows
   above it). */
.lobby-col .brass-chat {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.lobby-col .brass-chat__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.4rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 134, 30, 0.3) transparent;
}

.lobby-col .brass-chat__messages::-webkit-scrollbar {
  width: 6px;
}

.lobby-col .brass-chat__messages::-webkit-scrollbar-thumb {
  background: rgba(184, 134, 30, 0.3);
  border-radius: 3px;
}

.lobby-col .brass-chat__message {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--brass-gold-warm-pale);
}

/* Display name carries the seat colour (assigned inline by chat-panel.js)
   and a fixed amount of trailing spacing before the message content. */
.lobby-col .brass-chat__actor {
  font-weight: 700;
  margin-right: 0.55rem;
  letter-spacing: 0.02em;
}

.lobby-col .brass-chat__actor::after {
  /* Subtle separator dot so the seat-coloured name reads as its own unit. */
  content: "·";
  color: rgba(184, 134, 30, 0.5);
  margin-left: 0.45rem;
}

.lobby-col .brass-chat__content {
  color: var(--brass-gold-wash);
  /* pre-wrap honours `\n` while still collapsing runs of spaces and wrapping
     long lines — players can multi-line their messages without losing breaks. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.lobby-col .brass-chat__time {
  font-size: 0.72rem;
  color: rgba(232, 200, 122, 0.55);
  margin-left: 0.5rem;
}

/* System lines (e.g. "Alice left the game") — no actor, italic, dimmed.
   Left-aligned so they sit in the same vertical column as player messages
   rather than reading as headers. */
.lobby-col .brass-chat__message--system {
  font-style: italic;
  color: rgba(232, 200, 122, 0.65);
  text-align: left;
  font-size: 0.82rem;
  margin: 0.4rem 0;
}

.lobby-col .brass-chat__new-hint {
  align-self: center;
  margin: 0.2rem 0;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  background: rgba(220, 170, 50, 0.85);
  color: var(--brass-shadow-deep);
  border: none;
  border-radius: 99px;
  cursor: pointer;
}

/* Compose row — pinned to bottom. The textarea is stretched to the FULL height
   of the right-hand footer column (Send button + X/500 counter underneath) so
   its top edge lands at the same y as the Send button's top edge — the message
   field gets a taller usable area without growing the column overall. */
.lobby-col .brass-chat__compose {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  padding: 0.55rem 0 0;
  border-top: 1px solid rgba(184, 134, 30, 0.25);
}

.lobby-col .brass-chat__textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.35;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(184, 134, 30, 0.4);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--brass-gold-wash);
  box-sizing: border-box;
}

.lobby-col .brass-chat__textarea:focus-visible {
  outline: none;
  border-color: rgba(220, 170, 50, 0.85);
  background: rgba(0, 0, 0, 0.5);
}

/* Counter stacks UNDER the send button. chat-panel.js appends counter first
   then send; column-reverse puts send on top so the counter sits below. */
.lobby-col .brass-chat__compose-footer {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 0.25rem;
  flex-shrink: 0;
}

.lobby-col .brass-chat__char-counter {
  font-size: 0.72rem;
  color: rgba(232, 200, 122, 0.55);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.lobby-col .brass-chat__send {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(220, 170, 50, 0.7);
  border-radius: 6px;
  background: rgba(80, 48, 12, 0.92);
  color: var(--brass-gold-glow);
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.lobby-col .brass-chat__send:hover,
.lobby-col .brass-chat__send:focus-visible {
  background: rgba(120, 72, 18, 0.95);
  border-color: rgba(240, 190, 70, 0.95);
  outline: none;
}

.lobby-col .brass-chat__send:disabled {
  opacity: 0.45;
  cursor: default;
}

.lobby-col .brass-chat__error {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: rgba(120, 30, 20, 0.6);
  border: 1px solid rgba(220, 90, 70, 0.6);
  border-radius: 4px;
  color: var(--brass-red-faint);
  font-size: 0.78rem;
}

.landing__panel-action--danger {
  background: rgba(120, 30, 20, 0.7);
  border-color: rgba(220, 90, 70, 0.5);
  color: var(--brass-red-faint);
}

.landing__panel-action--danger:hover,
.landing__panel-action--danger:focus-visible {
  background: rgba(160, 40, 25, 0.85);
  border-color: rgba(240, 110, 85, 0.7);
}