/*
 * chat-room.css — dedicated standing-room surfaces (news-chat,
 * play-discussion). Light theme so it reads as part of the main site —
 * distinct from the Netflix-dark tv-chat panel and from arcade's arc-chat.
 */

.cr-chat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 22rem;
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-base-300, #d7dce4);
  border-radius: 0.9rem;
  background: var(--color-base-100, #ffffff);
  font-size: 0.9rem;
  line-height: 1.55;
}

.cr-chat-empty {
  color: var(--color-base-content, #4b5468);
  opacity: 0.7;
  font-size: 0.85rem;
  margin: auto;
}

.cr-chat-row {
  padding: 0.25rem 0;
  word-wrap: break-word;
}

.cr-chat-time {
  display: inline-block;
  min-width: 3.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-base-content, #4b5468);
  opacity: 0.55;
  font-size: 0.78rem;
  margin-right: 0.55rem;
}

.cr-chat-name {
  color: var(--color-primary, #1257a5);
  font-weight: 700;
}

.cr-chat-name::after {
  content: ':';
  color: var(--color-base-content, #4b5468);
  opacity: 0.55;
  font-weight: 400;
  margin-right: 0.25rem;
}

.cr-chat-row--host .cr-chat-name {
  color: color-mix(in srgb, var(--color-primary, #1257a5) 78%, #0a1023);
}

.cr-chat-body { color: var(--color-base-content, #4b5468); }

@media (max-width: 640px) {
  .cr-chat { min-height: 18rem; max-height: 55vh; padding: 0.9rem 0.9rem; font-size: 0.88rem; }
  .cr-chat-time { min-width: 2.9rem; font-size: 0.75rem; margin-right: 0.4rem; }
}