/* Чат комнаты: панель справа снизу над канвой. Отдельным файлом — ни с чем
   не пересекается, подключается одной строкой. */

#chat {
  position: fixed;
  right: 10px;
  bottom: 48px;
  z-index: 8;
  width: clamp(240px, 26vw, 330px);
  max-height: min(42vh, 420px);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: rgba(18, 20, 24, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  animation: chat-pop 0.16s ease-out both;
}
#chat.hidden { display: none; }

#chat .log {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* Полоса прокрутки в тон, а не системная белая поверх тёмной панели. */
  scrollbar-width: thin;
  scrollbar-color: rgba(236, 231, 220, 0.22) transparent;
}

#chat .msg { display: grid; gap: 3px; }
/* Продолжение блока прижимается к предыдущей реплике и обходится без шапки. */
#chat .msg.grouped { margin-top: -4px; }

#chat .head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#chat .head .ava {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 600;
  color: #16140f;
  background: hsl(var(--hue, 40) 42% 62%);
}
#chat .head .who {
  font-size: 11px;
  color: var(--chalk-mute, #8a8478);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#chat .head .time {
  margin-left: auto;
  flex: none;
  font-size: 10px;
  color: rgba(138, 132, 120, 0.7);
}

#chat .text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--chalk, #ece7dc);
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(236, 231, 220, 0.06);
  /* Длинное слово без пробелов иначе растянет панель за край экрана. */
  overflow-wrap: anywhere;
}
/* Свои реплики — тёплым и по правому краю: разговор читается двумя голосами
   без вглядывания в имена. */
#chat .msg.mine .text {
  background: rgba(var(--lamp-rgb, 255, 206, 128), 0.14);
  margin-left: 22px;
}
#chat .msg.mine .head { flex-direction: row-reverse; }
#chat .msg.mine .head .time { margin-left: 0; margin-right: auto; }

#chat form {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#chat input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  color: var(--chalk, #ece7dc);
  font: inherit;
  font-size: 13px;
}
#chat input:focus {
  outline: none;
  border-color: rgba(var(--lamp-rgb, 255, 206, 128), 0.5);
}
#chat button {
  flex: none;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(var(--lamp-rgb, 255, 206, 128), 0.16);
  color: var(--lamp-ink, #f0dcb4);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
#chat button:hover { background: rgba(var(--lamp-rgb, 255, 206, 128), 0.26); }

/* Счётчик непрочитанного на кнопке.
   Позицию кнопке здесь не задаём: .dial уже делает её fixed, а правило по id
   перебило бы это (id сильнее класса, и файл грузится позже) — кнопка
   вывалилась бы из угла в поток. Для абсолютного счётчика fixed-родитель и
   так подходит. */
#chat-btn .badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--alarm, #e0705a);
  color: #17110f;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
#chat-btn .badge.hidden { display: none; }
#chat-btn.active { opacity: 0.85; }

@keyframes chat-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #chat { animation: none; }
}