/* Чат сайта (chat.tpl + js/chat.js). Панель у правого края, как на старом
   ямианиме: свёрнутая — зелёная полоска с часами, развёрнутая — список
   сообщений и поле ввода.

   Только для больших экранов: на планшете и телефоне панель заняла бы пол-
   экрана поверх контента, поэтому ниже 1220px её нет вовсе (та же граница,
   на которой тема убирает боковую колонку). */
.chat {
	position: fixed;
	/* по умолчанию у правого края; когда на странице есть боковая колонка,
	   js/chat.js подставляет её место (--chat-right/--chat-width) — чат
	   встаёт ровно на уровень сайдбара, как было на старом сайте */
	right: var(--chat-right, 0px);
	bottom: 0;
	z-index: 120;
	width: var(--chat-width, 280px);
	max-width: 100%;
	font-size: 13px;
}
/* Атрибут hidden против правил с display: у .chat__panel стоит display:flex,
   и он перебивал бы hidden — сворачивание не работало вовсе. */
.chat[hidden],
.chat [hidden] {display: none !important;}
.chat__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 34px;
	padding: 0 14px;
	background: var(--chat-accent, #43a047);
	color: #fff;
	cursor: pointer;
	user-select: none;
}
.chat__bar:hover {background: var(--chat-accent-hover, #4cae50);}
.chat__title {font-weight: 500; letter-spacing: .04em;}
.chat__clock {opacity: .85;}
.chat__unread {
	margin-left: auto;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: rgba(0, 0, 0, .35);
	display: grid;
	place-items: center;
	font-size: 12px;
}
.chat__panel {
	display: flex;
	flex-direction: column;
	height: 420px;
	max-height: 70vh;
	background: var(--bg-darker);
	border: 1px solid var(--bdc);
	border-bottom: 0;
}
.chat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px;
	background: var(--bg-darkest);
	border-bottom: 1px solid var(--bdc);
}
.chat__head-title {font-weight: 500; letter-spacing: .04em;}
.chat__close {
	background: none;
	border: 0;
	color: var(--tt-lighter);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 2px 4px;
}
.chat__close:hover {color: var(--accent-2);}
.chat__list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.chat__empty {color: var(--tt-lighter); text-align: center; padding: 20px 0;}
.chat__msg {display: flex; gap: 8px; align-items: flex-start;}
.chat__ava {
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--bg-darkest);
}
.chat__body {min-width: 0; flex: 1 1 auto;}
.chat__meta {display: flex; align-items: baseline; gap: 8px;}
.chat__name {color: var(--accent-2); font-weight: 500; text-decoration: none;}
.chat__name:hover {text-decoration: underline;}
.chat__msg.is-mod .chat__name {color: var(--chat-accent, #43a047);}
.chat__time {color: var(--tt-lighter); font-size: 11px;}
.chat__del {
	margin-left: auto;
	background: none;
	border: 0;
	color: var(--tt-lighter);
	cursor: pointer;
	font-size: 12px;
	padding: 0 2px;
	visibility: hidden;
}
.chat__msg:hover .chat__del {visibility: visible;}
.chat__del:hover {color: var(--accent-2);}
.chat__text {word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.45;}
.chat__form {display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--bdc);}
.chat__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 34px;
	padding: 0 10px;
	background: var(--input, var(--bg-darkest));
	border: 1px solid var(--border-second, var(--bdc));
	color: inherit;
	border-radius: 0;
}
.chat__send {
	flex: 0 0 auto;
	padding: 0 16px;
	height: 34px;
	border: 0;
	background: var(--chat-accent, #43a047);
	color: #fff;
	cursor: pointer;
}
.chat__send:hover {background: var(--chat-accent-hover, #4cae50);}
.chat__send[disabled] {opacity: .5; cursor: default;}
.chat__error {padding: 6px 12px 10px; color: #e35d5d;}

@media screen and (max-width: 1219px) {
	.chat {display: none;}
}