/* ═══ PinpointR chat surface ═══
   One line of chat, shared by the party lobby (index.html), the duel /
   singleplayer overlay (streetview.html) and the spectator panel
   (spectate.html). Each page styles its own panel around the line: position,
   header, input, show/fade policy. Anything about the line itself belongs
   here, so the surfaces cannot drift apart. A page may only override density
   that its own panel needs (the lobby's 22×15 flag badge, its phone
   compaction) — never restate the line. */

.chat-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  line-height: 1.45;
  color: #e2e2e8; /* light gray — softer than pure white */
  word-break: break-word;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.chat-line.fading { opacity: 0; }

/* Profile-picture circle — initials stand in for photos; the border marks the
   team (blue team 1 / red team 2, matching the name tint and the HUD avatars).
   Spectators get the neutral teal ring instead. */
.chat-avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background: linear-gradient(135deg, #7c5ce0, #3b2a6b);
  border: 2px solid #4da3ff;
}
.chat-avatar.t2 { border-color: #ff5b6b; }
.chat-avatar.spec {
  border-color: #2dd4bf;
  background: linear-gradient(135deg, #134e4a, #0f766e);
}

.chat-body { min-width: 0; } /* let long words wrap beside the avatar */

/* Names are tinted by team — blue for team 1, red for team 2, matching the
   avatar borders. Your own messages get a subtle teal text. */
.chat-line .chat-name { font-weight: 700; }
.chat-line .chat-name.t1 { color: #4da3ff; }
.chat-line .chat-name.t2 { color: #ff5b6b; }
/* Spectator messages: neutral teal, with a compact tag so a hint or cheer is
   never mistaken for a player's own line. */
.chat-line .chat-name.spectator { color: #5eead4; }
.chat-line .chat-spec-tag {
  display: inline-block;
  margin-inline-start: 5px;
  padding: 0 5px;
  border: 1px solid rgba(45, 212, 191, 0.4);
  border-radius: 999px;
  color: #5eead4;
  font-size: 0.52rem;
  line-height: 1.35;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: 1px;
}
.chat-line.spectator { color: #d7fff6; }
.chat-line.own { color: #8ef0d8; }

/* A plain announcement (no person): quiet italic sentence. */
.chat-line.sys {
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  font-size: 0.78rem;
}
/* Guess announcements keep the avatar+name layout, but the message text stays
   small and italic so they don't compete with real chat. (Applied to the text,
   not the row, so the avatar and team-coloured name keep their size/weight.) */
.chat-line.sys-person .chat-msg {
  font-style: italic;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Real flag artwork (Windows cannot render flag emoji). */
.flag-img {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  vertical-align: -2px;
  margin-inline-end: 4px;
}