body {
	font-size: 16px;
}
input {
	font-size: 16px;
}
input[type=checkbox] {
	vertical-align: -2px;
}
textarea {
	font-size: 13.33px;
}
h1 {
	font-size: 24px;
}
h2 {
	font-size: 22px;
}
h3 {
	font-size: 20px;
}
h4 {
	font-size: 18px;
	margin-block-start: 1em;
	margin-block-end: 1em;
}
h5 {
	font-size: 18px;
	margin-block-start: 1em;
	margin-block-end: 1em;
}
h6 {
	font-size: 18px;
	margin-block-start: 1em;
	margin-block-end: 1em;
}
code, pre {
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre {
	font-size: 87.5%;
	border: 1px dashed #2f6fab;
	background-color: #f9f9f9;
}
code {
	font-size: 87.5%;
    color: #e83e8c;
    word-wrap: break-word;
}
pre code {
	color: inherit;
}

#chat_area, .gb_chat_messages_block {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px;
	padding-bottom: 16px !important;
	gap: 8px;
	background: #eee;
	xoverflow-y: auto;
}
.gb_chat_msg_1 {
	background: #fff;
	max-width: 85%;
	padding: 12px 16px;
	line-height: 1.3;
	word-wrap: break-word;
	align-self: flex-start;
	border-radius: 16px;
	border-bottom-left-radius: 4px;
}
.gb_chat_msg_2 {
	background: #cfc;
	max-width: 85%;
	padding: 12px 16px;
	line-height: 1.3;
	word-wrap: break-word;
	align-self: flex-end;
	border-radius: 16px;
	border-bottom-right-radius: 4px;
}
.gb_chat_msg_3 {
	background: #ffffe0;
	max-width: 85%;
	padding: 12px 16px;
	line-height: 1.3;
	word-wrap: break-word;
	align-self: flex-start;
	border-radius: 16px;
	border-bottom-left-radius: 4px;
	position: relative;
	margin-bottom: 30px;
}
.gb_chat_msg_3::after {
	content: "ответ ИИ, не является официальной документацией, возможны ошибки";
	white-space: nowrap;
	position: absolute;
	bottom: -20px;
	left: 4px;
	font-size: 11px;
	color: #666;
	background: transparent;
}
.think {
	color: #999;
	font-size: 0.85em;
	line-height: 1.3;
	padding-top: 10px;
	padding-left: 15%;
}
.gb_chat_msg_1 pre, .gb_chat_msg_2 pre, .gb_chat_msg_3 pre {
	padding: 12px;
	overflow-x: auto;
	margin: 12px 0;
}
.gb_chat_msg_1 code, .gb_chat_msg_2 code, .gb_chat_msg_3 code {
	font-family: 'Consolas', 'Monaco', monospace;
}
.gb_chat_date {
	padding-right: 10px;
	color: #888;
	font-size: 12px;
}
.gb_chat_msg {
	color: black;
}

.gb-img-fluid {
	max-width: 100%;
	height: auto;
}

/* ============================================
   1. Базовые стили для таблиц (как в Bootstrap)
   ============================================ */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    vertical-align: top;
    border-color: #dee2e6;
    caption-side: bottom;
    border-collapse: collapse;
}

/* Ячейки таблицы */
.table > :not(caption) > * > * {
    padding: 0.5rem 0.5rem;
    background-color: var(--bs-table-bg, transparent);
    border-bottom-width: 1px;
    border-bottom-color: #dee2e6;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg, transparent);
}

/* Заголовки */
.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    color: white;
    background-color: #BA0000;
}

/* Варианты оформления (полосатые строки) */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(0, 0, 0, 0.05);
    color: var(--bs-table-striped-color, #212529);
}

/* Таблица с бордерами */
.table-bordered {
    border: 1px solid #dee2e6;
}

.table-bordered > :not(caption) > * {
    border-width: 1px 0;
}

.table-bordered > :not(caption) > * > * {
    border-width: 0 1px;
}

/* Эффект при наведении на строку */
.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(0, 0, 0, 0.075);
}

/* ============================================
   2. Ключевая часть: Адаптивность (table-responsive)
   ============================================ */

/* Базовый контейнер для адаптивной таблицы */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
}

/* Адаптивные брейкпоинты (как в Bootstrap)
   Таблица становится скроллящейся только при размерах меньше указанных */
@media (max-width: 575.98px) {
    .table-responsive-sm {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767.98px) {
    .table-responsive-md {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 991.98px) {
    .table-responsive-lg {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1199.98px) {
    .table-responsive-xl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1399.98px) {
    .table-responsive-xxl {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Утилита для отключения адаптивности на определенных размерах,
   но это скорее демонстрация логики */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

/* Небольшая "фича" из Bootstrap: 
   если таблица внутри .table-responsive, 
   она не должна иметь margin-bottom, чтобы не было двойного отступа */
.table-responsive .table {
    margin-bottom: 0;
}