/* Локальный вариабельный шрифт Inter: */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/fonts/inter-variable.woff2') format('woff2');
}

/* Локальный курсивный шрифт Inter: */

@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('/fonts/inter-variable-italic.woff2') format('woff2');
}

/* Локальный шрифт JetBrains Mono: */

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url('/fonts/jetbrains-mono-variable-cyrillic.woff2') format('woff2'),
		url('/fonts/jetbrains-mono-variable-latin.woff2') format('woff2'),
		url('/fonts/jetbrains-mono-variable-cyrillic-ext.woff2') format('woff2'),
		url('/fonts/jetbrains-mono-variable-latin-ext.woff2') format('woff2');
}

/* Сброс отступов и базовая модель блока */

html, body {
	margin: 0;
	padding: 0;
}

* {
	box-sizing: border-box;
}

b, strong, th, h1, h2, h3, h4, h5, h6, optgroup, button {
	font-weight: 400;
}

/* Палитра нового стиля снята с фонового кадра */

:root {
	--ink: #14100D;
	--glass-1: rgba(34, 27, 22, .38);
	--glass-2: rgba(20, 16, 13, .52);
	--glass-3: rgba(11, 9, 7, .66);
	--edge: rgba(255, 236, 214, .18);
	--edge-soft: rgba(255, 236, 214, .10);
	--edge-subtle: rgba(255, 236, 214, .08);
	--bone: #FFFFFF;
	--taupe: #EDE6DD;
	--mute: rgba(255, 255, 255, .72);
	--amber: #f5b041;
	--ember: #F2A65A;
	--cognac: #B4593A;
	--dusk: #ADC3DC;
	--error: #FFB4B4;
	--lux-a: #8DF4FF;
	--lux-b: #2F6BFF;
	--lux-c: #6B27F5;
	--r-shell: 32px;
	--r-card: 22px;
	--r-block: 18px;
	--r-code: 14px;
	--r-pill: 999px;
	--seam: 0 0 14px 2px rgba(242, 166, 90, .45);
}

/* Базовая типографика страницы */

body {
	font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-weight: 400;
	color: var(--bone);
	background-color: var(--ink);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

/* Тёплый фоновой кадр с оранжевой подсветкой и затемнением */

body::before {
	content: '';
	position: fixed;
	inset: -3%;
	background-color: #100C0A;
	background-image:
		linear-gradient(rgba(10, 7, 5, .40), rgba(10, 7, 5, .48)),
		radial-gradient(78% 66% at 20% 80%, rgba(242, 166, 90, .18), transparent 62%),
		var(--custom-background-url, url('/images/background.jpg?v=2'));
	background-size: cover, cover, cover;
	background-position: center, center, center 42%;
	background-repeat: no-repeat;
	transform: scale(1.03);
	z-index: -1;
}

/* Плейсхолдеры полей в тёплом тоне */

::placeholder {
	color: rgba(255, 255, 255, .62);
	opacity: 1;
}

/* Универсальная скрытие элементов */

.hidden-element {
	display: none !important;
}

/* Кнопки основного действия: белая стеклянная пилюля */

.primary-button {
	display: inline-block;
	padding: 13px 30px;
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: var(--r-pill);
	background-color: rgba(255, 255, 255, .92);
	color: #1B120A;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
	transition: background .25s;
}

.primary-button:hover {
	background-color: #ffffff;
}

.primary-button:disabled {
	background-color: rgba(255, 255, 255, .35);
	cursor: default;
}

/* Кнопки второстепенного действия: прозрачная пилюля с рамкой */

.ghost-button {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid var(--edge);
	border-radius: var(--r-pill);
	background-color: transparent;
	color: var(--bone);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 400;
	cursor: pointer;
	transition: background .25s, border-color .25s;
}

.ghost-button:hover {
	background-color: rgba(255, 236, 214, .08);
	border-color: rgba(255, 236, 214, .28);
}

/* Кнопка без фона только с иконкой */

.icon-only-button {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: var(--r-pill);
	background-color: transparent;
	cursor: pointer;
	transition: color .25s, background .25s;
}

.icon-only-button:hover {
	background-color: rgba(255, 236, 214, .1);
}

/* Круглая кнопка действия в поле ввода */

.round-icon-button {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 50%;
	background-color: var(--glass-1);
	cursor: pointer;
	padding: 0;
	transition: background .25s;
}

.round-icon-button:hover {
	background-color: rgba(255, 236, 214, .12);
}

.round-icon-button:disabled {
	background-color: rgba(255, 236, 214, .04);
	cursor: default;
}

/* Группа кнопки микрофона со стрелкой режима */

.voice-button-group {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

/* Маленькая кнопка-стрелка рядом с круглой кнопкой */

.small-arrow-button {
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	position: absolute;
	right: -7px;
	bottom: -5px;
	border: none;
	border-radius: 50%;
	background-color: rgba(243, 237, 228, .22);
	cursor: pointer;
	padding: 0;
	z-index: 2;
	transition: background .25s;
}

.small-arrow-button:hover {
	background-color: rgba(243, 237, 228, .28);
}

/* Иконки внутри кнопок */

.button-icon {
	width: 17px;
	height: 17px;
	vertical-align: -3px;
	margin-right: 8px;
}

.action-icon {
	width: 20px;
	height: 20px;
	display: block;
	margin: 0 auto;
}

.arrow-icon {
	width: 12px;
	height: 12px;
	display: block;
	margin: 0 auto;
}

.header-icon {
	width: 20px;
	height: 20px;
	display: block;
}

/* Поля ввода текста */

.text-input-base {
	padding: 12px 16px;
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-card);
	background-color: var(--glass-2);
	color: var(--bone);
	font-family: inherit;
	font-size: 14px;
}

.text-input-base:focus {
	outline: none;
	border-color: rgba(242, 166, 90, .42);
}

/* Сообщения об ошибках */

.error-text {
	color: var(--error);
	font-size: 13px;
}