/* Эмодзи в поле ввода сообщения.

   Внутри <textarea> браузер рисует только текст — картинку туда не вставить.
   Поэтому набранный эмодзи показывался системным шрифтом (в Windows — Segoe UI
   Emoji), а после отправки превращался в Twemoji: человек печатал один значок,
   а получал другой.

   Лечится шрифтом: Twemoji Mozilla — тот же рисунок, что в наших картинках,
   собранный в цветной шрифт (COLR/CPAL). 0.47 МБ в woff2.

   unicode-range здесь принципиален. Без него браузер тянул бы эти полмегабайта
   на каждой странице с полем ввода. С ним файл запрашивается, только когда на
   странице реально есть символ из перечисленных диапазонов, то есть когда
   человек уже набрал эмодзи. Диапазоны те же, что проверяет is_emoji_point()
   в core/reactions.php. */
@font-face {
	font-family: 'Twemoji Socralium';
	src: url('/ext/kosty/socralium/fonts/TwemojiMozilla.woff2') format('woff2');
	font-display: swap;
	unicode-range: U+200D, U+2190-21FF, U+2600-27BF, U+2B00-2BFF, U+FE0F, U+1F000-1FAFF;
}

/* Шрифт дописан в конец списка, а не заменяет его: буквы и цифры по-прежнему
   рисует Trebuchet, подмена касается только эмодзи. */
.message-box textarea {
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, 'Twemoji Socralium', sans-serif;
}

/* Реакции на сообщения.
   Цвета взяты из палитры socralium (амбер по пергаменту), чтобы полоса
   читалась как часть темы, а не как вставка из чужого расширения. */

.sr-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Прижимаем к правому краю сообщения: реакция — пометка на полях, она не
	   должна спорить с текстом за начало строки. */
	justify-content: flex-end;
	gap: 6px;
	/* Слева — ширина колонки аватара (.avatar-cont: 65px + 10px padding-right),
	   чтобы при переносе на узком экране полоса не заезжала под аватар.
	   clear: both оставляем: полоса всегда идёт ниже текста, а не обтекает его. */
	margin: 8px 0 2px 75px;
	clear: both;
}

.sr-bar.sr-busy {
	opacity: 0.55;
	pointer-events: none;
}

.sr-chip,
.sr-add {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 26px;
	padding: 2px 9px;
	border: 1px solid rgba(180, 140, 60, 0.35);
	border-radius: 13px;
	background: rgba(255, 252, 245, 0.75);
	color: #5a4a30;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.12s, border-color 0.12s;
}

.sr-chip:hover,
.sr-add:hover {
	background: rgba(180, 130, 30, 0.16);
	border-color: rgba(180, 130, 30, 0.6);
}

/* Своя реакция. Фон тот же, что у остальных чипов и у кнопки добавления рядом —
   отличают её рамка, вес и цвет текста. Раньше здесь стояла плотная заливка
   rgba(180,130,30,0.26): чип выделялся, но выпадал из ряда, потому что сосед
   справа оставался светлым. */
.sr-chip.sr-mine {
	background: rgba(255, 252, 245, 0.75);
	/* Чуть плотнее соседних 0.35, но уже не обводка: после того как фоны
	   сравнялись, прежние 0.75 читались как рамка другого элемента. */
	border-color: rgba(180, 130, 30, 0.5);
	color: #3a2a10;
	font-weight: 600;
}

/* Отдельное правило, иначе своя реакция остаётся без отклика на наведение:
   .sr-chip:hover и .sr-chip.sr-mine равны по специфичности, а .sr-mine идёт
   ниже по файлу и перебивает фон. С плотной заливкой это было незаметно —
   теперь фоны совпадают, и без этого правила чип просто не реагировал бы. */
.sr-chip.sr-mine:hover {
	background: rgba(180, 130, 30, 0.16);
	/* На шаг плотнее, чем у обычного чипа под курсором (0.6) — тот же перевес,
	   что и в покое. */
	border-color: rgba(180, 130, 30, 0.7);
}

/* Эмодзи — картинки Twemoji, тот же набор, которым phpBB подменяет их в
   тексте сообщений. Иначе выбранный значок выглядел бы одним, а
   опубликованный другим: в поле ввода его рисует шрифт системы. */
.sr-emoji {
	width: 16px;
	height: 16px;
	display: block;
	flex: 0 0 auto;
}

/* Запасной вариант, когда картинки для кода в twemoji нет: тот же размер, но
   рисует шрифт. Классы .sr-emoji/.sr-cell-img остаются на элементе, поэтому
   ширину и высоту снимаем явно — иначе символ обрежется. */
.sr-emoji-text {
	width: auto;
	height: auto;
	font-size: 15px;
	line-height: 1;
}

.sr-count {
	font-variant-numeric: tabular-nums;
}

.sr-add {
	padding: 2px 7px;
	color: #8b6914;
}

/* --- Палитра --- */

.sr-picker {
	position: fixed;
	z-index: 1000;
	/* border-box обязателен: в теме глобальный сброс закомментирован, а без него
	   width и max-width задают ширину БЕЗ полей и рамки. На узком экране
	   calc(100vw - 16px) давало 304px содержимого плюс 18px обвязки — панель
	   выходила шире экрана, и расчёт положения в reactions.js прижимал её к
	   отрицательному левому краю. */
	box-sizing: border-box;
	width: 320px;
	max-width: calc(100vw - 16px);
	padding: 8px;
	border: 1px solid rgba(180, 140, 60, 0.5);
	border-radius: 8px;
	background: #fffcf5;
	box-shadow: 0 8px 28px rgba(60, 40, 10, 0.28);
}

.sr-picker__search {
	margin-bottom: 6px;
}

/* Селектор с именем элемента намеренно: в forms.css есть
   input[type="search"] { -webkit-box-sizing: content-box }, и его специфичность
   (элемент + атрибут) выше, чем у одного класса. Без этого поле вылезает за
   панель на ширину отступов и рамки. */
.sr-picker input.sr-picker__input {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 6px 10px;
	border: 1px solid rgba(180, 140, 60, 0.45);
	border-radius: 4px;
	background: #fff;
	color: #3a2a10;
	font-size: 13px;
}

.sr-picker input.sr-picker__input:focus {
	outline: none;
	border-color: rgba(180, 130, 30, 0.75);
}

.sr-picker__tabs {
	display: flex;
	gap: 2px;
	margin-bottom: 6px;
	padding-bottom: 5px;
	border-bottom: 1px solid rgba(180, 140, 60, 0.25);
}

.sr-tab {
	flex: 1 1 0;
	padding: 4px 0;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 4px 4px 0 0;
	background: none;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	opacity: 0.55;
}

.sr-tab:hover {
	opacity: 1;
	background: rgba(180, 130, 30, 0.1);
}

.sr-tab.is-active {
	opacity: 1;
	border-bottom-color: #8b6914;
}

.sr-picker__grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 1px;
	max-height: 240px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.sr-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 0;
	border: 0;
	border-radius: 4px;
	background: none;
	cursor: pointer;
}

.sr-cell-img {
	width: 20px;
	height: 20px;
}

.sr-tab-img {
	width: 16px;
	height: 16px;
}

.sr-cell:hover {
	background: rgba(180, 130, 30, 0.18);
}

.sr-picker__empty {
	grid-column: 1 / -1;
	margin: 12px 0;
	color: #8a7550;
	font-size: 12px;
	text-align: center;
}

/* На узких экранах палитра шире и клетки крупнее — попадать пальцем. */
@media (max-width: 700px) {
	.sr-picker {
		width: calc(100vw - 16px);
	}

	.sr-picker__grid {
		grid-template-columns: repeat(7, 1fr);
		max-height: 45vh;
	}

	.sr-cell {
		padding: 7px 0;
	}

	.sr-cell-img {
		width: 24px;
		height: 24px;
	}

	.sr-chip,
	.sr-add {
		min-height: 30px;
	}
}

/* Кнопка эмодзи в панели редактора сообщений. Штатная панель смайлов prosilver
   из этого стиля убрана, поэтому вставка идёт через палитру реакций.
   Оформление не задаём: кнопка уже несёт классы .button .button-icon-only
   и выглядит как соседние B, цитата и ссылка. */
.sr-emoji-btn svg {
	display: block;
	margin: 0 auto;
}