* { /* Сброс стилей */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body { /* Общие настройки */
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    height: 100vh;
}

.hidden {
    display: none !important;
}

.disable {
    pointer-events: none; /* Отключает возможность взаимодействия */
    background-color: #ddd !important; /* Серый фон */
    color: #888 !important; /* Серый текст */
    transition: none !important; /* Отключает анимации */
}

.canvas { /* Основной канвас */
    display: flex;
    flex: 1;
    flex-direction: row; /* Горизонтальное выравнивание */
    overflow: hidden; /* Убираем общий скролл страницы */
    height: calc(100vh - 40px); /* Высота за вычетом шапки */
    background-color: #DEDEDE;
}

.examples-block, .requests-block, .responds-block, .queue-block, .info-block { /* Общие параметры для многих элементов */
    overflow-y: auto; /* Скролл внутри колонок */
    padding: 6px 0 0 0;
}



/* ШАПКА */
.header {
    display: flex;
    height: 40px;
    background-color: #F5F5F5;
}

.header-general, .header-settings {
    display: flex;
    flex: 1;
    flex-direction: row;
    height: 40px;
}

.header-examples-block, .header-requests-block, .header-queue-block, .header-responds-block, .header-settings {
    display: flex; /* Включаем flexbox */
    align-items: center; /* Центровка по вертикали */
    justify-content: center; /* Центровка по горизонтали */
}

.header-examples-block {
    flex: 0 0 300px;
}

.header-requests-block {
    flex: 1;
}

.header-queue-block {
    flex: 0 0 116px;
}

.header-responds-block {
    flex: 1;
    justify-content: space-between; /* Распределение элементов по краям */
}

.header-username {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 4px;
}

.header-button-request, .header-button-update, .header-button-respond, .header-settings-open, .header-settings-close {
    display: inline-flex; /* Чтобы кнопка подстраивалась под размер текста */
    align-items: center; /* Центровка текста по вертикали */
    justify-content: center; /* Центровка текста по горизонтали */
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.16s;
}

.header-button-request {
    padding: 4px 12px;
    background-color: #FE8;
}

.header-button-request:hover {
    border-radius: 4px;
    background-color: #DC8;
}

.header-button-update {
    padding: 4px 12px;
    background-color: #8FF;
}

.header-button-update:hover {
    border-radius: 4px;
    background-color: #8DD;
}

.header-button-respond {
    margin: 0 auto; /* Сохраняем центрирование для кнопки */
    padding: 4px 12px;
    background-color: #AAF;
}

.header-button-respond:hover {
    border-radius: 4px;
    background-color: #88D;
}

.header-settings-open {
    font-size: 16px;
    margin: 0 6px 0 0;
    padding: 2px 2px 3px 2px;
    transition: background-color 0.16s;
}

.header-settings-open:hover {
    border-radius: 4px;
    background-color: #BBB;
}

.header-settings-label {
    flex: 1;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
    padding: 4px 12px;
}

.header-settings-close {
    font-size: 16px;
    height: 26px;
    margin: 0 6px 0 0;
    padding: 2px 2px 3px 2px;
    transition: background-color 0.16s;
}

.header-settings-close:hover {
    border-radius: 4px;
    background-color: #BBB;
}



/* БЛОК С НАСТРОЙКАМИ */
.settings-block { /* Общий блок настроек */
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Разбивает на ряды при переполнении */
    width: 100%;
    height: 100vh; /* На весь экран */
    padding: 6px;
}

/* Авторизация */
.setting-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin: 6px;
    border-radius: 4px;
    background-color: #F5F5F5;
}

.auth-name { /* Заголовок */
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 6px;
}

.auth-input-wrapper { /* Обертка для лейбла и текстбокса */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 6px;
}

.auth-label { /* Лейбл */
    white-space: nowrap;
    font-size: 14px;
    margin-right: 3px;
}

.auth-textbox { /* Поле ввода */
    flex: 1;
    resize: none; /* Убираем возможность изменения размера вручную */
    outline: none; /* Убираем синюю рамку при фокусе */
    font-size: 14px;
    width: 0;
    max-width: 100%; /* Ограничение ширины */
    border: 0px;
    border-radius: 4px;
    background-color: #0000; /* Убираем стандартный фон */
}

.auth-buttons { /* Блок кнопок */
    display: flex;
    justify-content: space-between;
    gap: 12px; /* Промежуток между кнопками */
}

.auth-button { /* Общие стили кнопок */
    flex: 1;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 4px;
    transition: background-color 0.16s;
}

.auth-button-check {
    background-color: #FE8;
}

.auth-button-check:hover {
    background-color: #DC8;
}

.auth-button-login {
    background-color: #8F8;
}

.auth-button-login:hover {
    background-color: #7D7;
}

.authorized {
    background-color: #BFB;
}

.unauthorized {
    background-color: #FFB;
}



/* БЛОК С ПРИМЕРАМИ */
.examples-block {
    /*flex-shrink: 0; /* Не уменьшается при сжатии экрана */
    flex: 0 0 300px; /* Фиксированная ширина */
}

.example-item {
    display: flex;
    flex: 1;
    cursor: pointer;
    min-height: 24px;
    margin: 0 6px 6px 6px;
    border-radius: 4px;
    background-color: #F5F5F5;
}

.example-name, .example-info {
    display: flex;
    justify-content: center;
    align-items: center;
}

.example-status {
    flex-shrink: 0;
    width: 24px;
    padding: 2px 0 0 2px;
}

.example-name {
    flex: 1;
    text-align:center;
    font-size: 16px;
    padding: 4px 6px;
    transition: background-color 0.16s;
}

.example-name:hover {
    border-radius: 4px;
    background-color: #CCC;
}

.example-info {
    flex-shrink: 0;
    width: 24px;
    padding: 0 0 2px 0;
    /*margin: 0 0px 0px 6px;*/
    transition: background-color 0.16s;
}

.example-info:hover {
    border-radius: 4px;
    background-color: #CCC;
}

.type-single {
    background-color: #CFF;
}

.type-mutual {
    background-color: #EBF;
}

.type-batch {
    background-color: #FCA;
}



/* БЛОК С ЗАПРОСАМИ */
.requests-block {
    flex: 1; /* Заполняют оставшееся пространство */
}

.requests-item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 6px 6px 6px;
    border-radius: 4px;
    background-color: #F5F5F5;
}

.requests-header { /* Шапка элемента */
    display: flex;
    align-items: top;
}

.requests-time, .requests-function, .requests-remove {
    flex-shrink: 0;
}

.requests-time {
    font-size: 12px;
    padding: 6px 0 0 6px;
    color: #555;
}

.requests-function {
    flex: 1;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding: 5px 6px 0 6px;
}

.requests-remove {
    cursor: pointer;
    font-size: 16px;
    height: 26px;
    padding: 2px 2px 3px 2px;
    border-radius: 4px;
    transition: background-color 0.16s;
}

.requests-remove:hover {
    border-radius: 4px;
    background-color: #F88;
}

.requests-code { /* Блок кода */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.requests-textarea {
    width: 100%;
    min-height: 54px; /* Начальная высота */
    height: auto; /* Высота будет автоматической */
    overflow: hidden; /* Убираем внутренний скролл */
    padding: 0 6px 6px 6px;
    border: 0px; /* Скрыть границы */
    font-family: monospace;
    font-size: 14px;
    resize: none; /* Убираем хваталку */
    box-sizing: border-box;
    outline: none; /* Убираем синюю рамку при фокусе */
    background-color: #0000; /* Убираем стандартный фон */
}

.incompatible {
    background-color: #FCC !important;
}



/* БЛОК С ОЧЕРЕДЬЮ */
.queue-block {
    flex: 0 0 116px;
    /*flex-shrink: 0; /* Не уменьшается при сжатии экрана */
    /*width: 116px; /* Фиксированная ширина */
}

.queue-item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    margin: 0 6px 6px 6px;
    min-height: 20px;
    border-radius: 4px;
    background-color: #F5F5F5;
}

.queue-pending {
    background-color: #FFF5BA;
}

.queue-finished {
    background-color: #BCBAFF;
}

.queue-success {
    background-color: #BFB;
}

.queue-error {
    background-color: #FBB;
}



/* БЛОК С ОТВЕТАМИ */
.responds-block {
    flex: 1; /* Заполняют оставшееся пространство */
}

.responds-item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 6px 6px 6px;
    border-radius: 4px;
    background-color: #F5F5F5;
}

.responds-header { /* Шапка элемента */
    display: flex;
    align-items: top;
}

.responds-time, .responds-function, .responds-remove {
    flex-shrink: 0;
}

.responds-time {
    font-size: 12px;
    padding: 6px 0 0 6px;
    color: #555;
}

.responds-function {
    flex: 1;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding: 5px 6px 0 6px;
}

.responds-clipboard {
    cursor: pointer;
    font-size: 16px;
    height: 26px;
    padding: 2px 4px 3px 3px;
    border-radius: 4px;
    transition: background-color 0.16s;
}

.responds-clipboard:hover {
    border-radius: 4px;
    background-color: #DA7;
}

.responds-code { /* Блок кода */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.responds-textarea {
    width: 100%;
    min-height: 54px; /* Начальная высота */
    height: auto; /* Высота будет автоматической */
    overflow: hidden; /* Убираем внутренний скролл */
    padding: 0 6px 6px 6px;
    border: 0px; /* Скрыть границы */
    font-family: monospace;
    font-size: 14px;
    resize: none; /* Убираем хваталку */
    box-sizing: border-box;
    outline: none; /* Убираем синюю рамку при фокусе */
    background-color: #0000; /* Убираем стандартный фон */
}

.responds-success {
    background-color: #DFD;
}

.responds-error {
    background-color: #FDD;
}



/* БЛОК С ИНФОРМАЦИЕЙ */
.info-block {
    flex: 1 0 116px;
}

.info-item {
    margin: 0 6px 6px 6px;
    border-radius: 4px;
    background-color: #F5F5F5;
}

.info-header {
    display: flex;
    align-items: top;
}

.info-swap {
    cursor: pointer;
    font-size: 18px;
    height: 26px;
    padding: 0px 5px 0px 5px;
    border-radius: 4px;
    transition: background-color 0.16s;
}

.info-swap:hover {
    border-radius: 4px;
    background-color: #CCC;
}

.info-function {
    flex: 1;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding: 5px 6px 0 6px;
}

.info-close {
    cursor: pointer;
    font-size: 16px;
    height: 26px;
    padding: 2px 2px 3px 2px;
    border-radius: 4px;
    transition: background-color 0.16s;
}

.info-close:hover {
    border-radius: 4px;
    background-color: #CCC;
}

.info-text {
    font-size: 16px;
    padding: 6px;
}