@CHARSET "UTF-8";

html, body {
	height: 100%;
	margin: 0;
	font-family: ui-sans-serif,-apple-system,system-ui,Segoe UI,Helvetica,Apple Color Emoji,Arial,sans-serif,Segoe UI Emoji,Segoe UI Symbol;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* header наверху, footer внизу */
	min-height: 100vh;
	font-size: 16px;
	font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

header {
	display: flex;
	justify-content: space-between; /* логотип слева, кнопки справа */
	align-items: center;
}

#logo-area {
	display: flex;
	align-items: center;
	gap: 10px;
}

button, textarea {
	font-family: ui-sans-serif,-apple-system,system-ui,Segoe UI,Helvetica,Apple Color Emoji,Arial,sans-serif,Segoe UI Emoji,Segoe UI Symbol;
	font-size: 16px;
}

#header-buttons {
	display: flex;
	align-items: center;
	gap: 10px;
}

@media (max-width: 768px) {
	#header-buttons {
		display: none;
	}
}

.header-button {
	border-radius: 1000px;
	padding-inline-end: 12px;
	padding-inline-start: 12px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 8px;
	padding-bottom: 8px;
	border-color: rgba(0, 0, 0, 0.15);
	border-width: 1px;
	background-color: rgb(255, 255, 255);
	color: rgb(13, 13, 13);
	font-size: 14px;
}

.header-button-active {
/*	border-color: rgba(0, 0, 0, 0);*/
	background-color: rgb(13, 13, 13);
	color: rgb(255, 255, 255);
}

main {
	flex: 1; /* занимает всё доступное пространство между header и footer */
	flex-direction: column;
	display: flex;
	align-items: center;    /* центрируем контент по вертикали */
	justify-content: center;/* и по горизонтали */
}

main > * {
	width: 98%;
}

@media (min-width: 768px) {
	main > * {
		width: 50%;
	}
}

.profiler-db {
	margin: 10px 0 25px 0;
	padding: 10px 0;
}
.profiler-db > .show-pre {
	margin: 0 !important;
}
.profiler_critical {
	background: #ff7070;
}
.profiler_important {
	background: #ffcccc;
}
.profiler_normal {
	background: #dcdcdc;
}

.ajax:link, .ajax:hover, .ajax:active, .ajax:visited, .ajax:focus
{
	text-decoration: none;
	border-bottom: 1px dashed;
}

a.ajax
{
	cursor: pointer;
}

a
{
	color: #0d0d0d;
}

h1
{
	margin: 0;
	font-size: 28px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	color: rgb(13, 13, 13);
	min-height: 42px;
}

#message-textarea
{
	height: 82px;
	padding: 16px;
	background-clip: padding-box;
	box-sizing: border-box;
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 4px 4px 0px, rgba(0, 0, 0, 0.62) 0px 0px 1px 0px;
	border-radius: 28px;
	border-color: rgba(13, 13, 13, 0.05);
	border-width: 0;
	resize: none;
}

textarea::placeholder {
  color: #999;
  font-weight: 300;
}

textarea:focus {
  outline: none;
}

button svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

#chat {
	display: none;
	flex: 1;
	overflow-y: scroll;
	min-height: 0;
}

#chat::-webkit-scrollbar {
	width: 0;
	background: transparent;
}

.chat-user-message
{
	display: inline-block;
	font-size: 1rem;
	color: #0d0d0d;
	background-color: #e9e9e980;
	border-radius: 1000px;
	padding: 10px;
/*	margin: 24px 0;*/
}

.chat-ai-message
{
	display: inline-block;
	font-size: 1rem;
	margin: 24px 0;
}


/* Полупрозрачная подложка на весь экран */
#modal-overlay {
  position: fixed;         /* фиксируем относительно окна браузера */
  top: 0;
  left: 0;
  width: 100vw;            /* на всю ширину окна */
  height: 100vh;           /* и на всю высоту */
  background: rgba(0, 0, 0, 0.5); /* затемнение фона */
  display: none;           /* используем flex для центрирования */
  align-items: center;     /* центр по вертикали */
  justify-content: center; /* центр по горизонтали */
  z-index: 9999;           /* поверх всего контента */
}

/* Само модальное окно */
#modal-login {
	background: white;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	max-width: 388px;
	border-radius: 16px;
	border-color: rgba(13, 13, 13, 0.05);
	box-sizing: border-box;
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 8px 12px 0px, rgba(0, 0, 0, 0.62) 0px 0px 1px 0px;
}

#modal-login-close-button:hover {
	background-color: #eeeeee !important;
}

.blink-smooth {
  animation: blink-smooth 2s ease-in-out infinite;
}

@keyframes blink-smooth {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}