/* Живой чат: вкладки каналов, лента, строки сообщений. */

/* ---------- Чат ---------- */
.chat-box { padding-bottom: 13px; }
.chat-head {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
  padding-bottom: 11px; margin-bottom: 11px;
  border-bottom: 1px solid var(--border);
}
.chat-filters { display: flex; flex-wrap: wrap; gap: 6px; }
/* Подпись вкладки сразу в цвете своего канала — как в игровом чате, где
   канал видно по цвету ника, не читая текст. */
.chat-filter {
  background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer;
  color: var(--muted);
}
.chat-filter:hover { border-color: var(--border-strong); }
.chat-filter[data-channel="GENERAL"] { color: #dcdce0; }
.chat-filter[data-channel="SHOUT"] { color: #d98c4a; }
.chat-filter[data-channel="TRADE"] { color: #d4639a; }
.chat-filter[data-channel="WORLD"] { color: #ff4d4d; }
/* Выбранная вкладка отличается рамкой и весом: цвет ника она и так несёт. */
.chat-filter.current { border-color: currentColor; font-weight: 650; }
.chat-actions { display: flex; align-items: center; gap: 11px; }
.chat-status { font-size: 12px; }
.chat-clear {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer;
}
.chat-clear:hover { color: var(--text); border-color: var(--border-strong); }

/* Прозрачная обёртка чата: подложкой служат сами сообщения (см. .chat-line).
   Рамки и акцентной полосы нет — они бы читались как рамка пустой панели. */
.chat-panel { background: transparent; border: 0; padding: 0; }
.chat-panel .chat-head { border-bottom: 0; padding-top: 0; padding-bottom: 9px; }
/* Лента без своей подложки: каждое сообщение — отдельный полупрозрачный
   прямоугольник, а между ними видно фон страницы. */
.chat-log {
  height: 62vh; min-height: 340px; overflow-y: auto;
  background: transparent; border: 0; padding: 0;
  font-size: 14px; line-height: 1.55;
}
/* Превью в герое: лента короче и без минимальной высоты, иначе панель
   оказывается выше всего героя и ломает его пропорции. */
/* Превью показывает 10 сообщений (CHAT_PREVIEW_LINES в blueprints/main.py).
   Замерено в браузере: 10 строк занимают 343px. Ниже лента обрезает их по
   высоте и часть сообщений не видна без прокрутки. */
.chat-panel-compact .chat-log { height: 345px; min-height: 0; font-size: 13px; line-height: 1.5; }
.chat-panel-compact { margin-bottom: 0; }
.chat-more {
  display: block; margin-top: 9px; text-align: right;
  font-size: 12px; color: var(--muted); text-decoration: none;
}
.chat-more:hover { color: var(--accent); }
/* Строка — обычный текстовый абзац, а не набор колонок: ник и сообщение
   идут вместе («Ник: сообщение»), как в игровом клиенте. Колонки с
   фиксированной шириной тогда не нужны, и пустого места между ником и
   текстом не остаётся. */
.chat-line {
  margin-bottom: 5px; padding: 5px 8px;
  background: rgba(255, 255, 255, .05); border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}
/* Последнее сообщение без нижнего отступа: иначе под лентой остаётся
   лишний полупрозрачный зазор. */
.chat-line:last-child { margin-bottom: 0; }
.chat-time { color: var(--muted); margin-right: 9px; font-variant-numeric: tabular-nums; }
.chat-name { font-weight: 600; }
/* Пометка канала в общей ленте, где смешаны все четыре. */
.chat-ch { margin-right: 9px; font-size: 12px; opacity: .85; }
/* Ник окрашен цветом своего канала, как в клиенте. */
.chat-line.chat-ch-general .chat-name { color: #dcdce0; }
.chat-line.chat-ch-shout .chat-name { color: #d98c4a; }
.chat-line.chat-ch-trade .chat-name { color: #d4639a; }
.chat-line.chat-ch-world .chat-name { color: #ff4d4d; }

/* Состояние соединения с игровым чатом. Индикатор в шапке ленты и строка в
   ней самой: при обрыве лента выглядела живой, хотя сообщения не приходили. */
.chat-status.is-live { color: var(--green); }
.chat-status.is-wait { color: var(--accent); }
.chat-status.is-down { color: var(--red); }
.chat-notice {
  margin-top: 5px; padding: 5px 8px; text-align: center;
  color: var(--accent); font-size: .78rem;
  background: var(--accent-soft); border-radius: var(--radius-sm);
}