/* Основной контейнер вкладок */
.gigachat-tabs {
    width: 100%;                /* Растянуть на всю доступную ширину */
    margin-bottom: 20px;        /* Отступ снизу */
    border: 1px solid #ddd;     /* Рамка вокруг вкладок (можно убрать) */
    box-sizing: border-box;      /* Учитывать padding/border в ширине */
    padding: 0;                 /* Убрать внутренние отступы, если не нужны */
}

/* Шапка вкладок (список переключателей) */
.gigachat-tabs-header {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;              /* Чтобы можно было выровнять элементы */
    justify-content: flex-start;  /* Выравниваем вкладки вправо */
    background: #f7f7f7;
    border-bottom: 1px solid #ddd;
}

/* Каждая отдельная вкладка-переключатель (li) */
.gigachat-tabs-header li {
    padding: 10px 15px;
    cursor: pointer;
    border-right: 1px solid #ddd; 
    /* Можно добавить margin-left, если хотите промежутки */
}

/* Активная вкладка */
.gigachat-tabs-header li.active {
    background: #fff;
    font-weight: bold;
    border-right: 1px solid #ddd;
}

/* Контейнер с содержимым вкладок */
.gigachat-tabs-content {
    padding: 15px; /* Отступы внутри контента */
}

/* Каждая вкладка (контент) */
.gigachat-tab-content {
    display: block; /* Изначально все видны, но скрипт прячет лишние */
}

/* ===== Стили для вкладок в админке ===== */
.gigachat-tabs.gigachat-tabs-admin {
    background: #fafafa;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Шапка вкладок в админке */
.gigachat-tabs.gigachat-tabs-admin .gigachat-tabs-header li {
    background: #eee;
}