/* Telegram-like color scheme with light and dark mode */
:root {
    --tg-theme-bg-color: #ffffff;
    --tg-theme-text-color: #000000;
    --tg-theme-secondary-bg-color: #f0f0f0;
    --tg-theme-button-color: #2481cc;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-link-color: #2481cc;
    --tg-theme-hint-color: #999999;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tg-theme-bg-color: #1a1a1a;
        --tg-theme-text-color: #e1e1e1;
        --tg-theme-secondary-bg-color: #242526;
        --tg-theme-button-color: #2481cc;
        --tg-theme-button-text-color: #ffffff;
        --tg-theme-link-color: #2481cc;
        --tg-theme-hint-color: #b0b3b8;
    }
}

/* Базовые стили для Telegram WebApp */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--tg-theme-text-color, #000000);
    background-color: var(--tg-theme-bg-color, #ffffff);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y: scroll;
}

.container {
    max-width: 768px;
    margin: 0 auto;
    padding: 16px;
}

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
    color: var(--tg-theme-text-color, #000000);
    letter-spacing: -0.01em;
    font-weight: 600;
}

/* Карточки */
.card {
    background-color: var(--tg-theme-secondary-bg-color, #f0f0f0);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Кнопки */
.button {
    background-color: var(--tg-theme-button-color, #2481cc);
    color: var(--tg-theme-button-text-color, #ffffff);
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
    display: inline-block;
    text-align: center;
}

.button:hover {
    opacity: 0.9;
}

.button:active {
    opacity: 0.8;
}

.button.button-block {
    display: block;
    width: 100%;
}

/* Hint text */
.hint {
    font-size: 14px;
    color: var(--tg-theme-hint-color, #999999);
}

/* Ссылки */
a {
    color: var(--tg-theme-link-color, #2481cc);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Формы */
input, textarea, select {
    background-color: var(--tg-theme-bg-color, #ffffff);
    color: var(--tg-theme-text-color, #000000);
    border: 1px solid var(--tg-theme-hint-color, #999999);
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--tg-theme-button-color, #2481cc);
}

/* Списки */
ul, ol {
    padding-left: 24px;
    margin: 20px 0;
}

ul li, ol li {
    margin-bottom: 8px;
    color: var(--tg-theme-text-color);
}

/* Утилиты */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* Лоадер и спиннер */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100px;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--tg-theme-button-color);
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Заголовок */
.header {
    text-align: center;
    margin-bottom: 16px;
}

/* Скрытие основного контента по умолчанию */
.content {
    display: none;
}

/* Ошибка */
.error {
    color: #e53935;
    text-align: center;
    padding: 20px;
}

/* Статус подписки */
.subscription-status {
    font-weight: bold;
    margin-top: 8px;
}

.subscription-active {
    color: #4caf50;
}

.subscription-expired {
    color: #e53935;
}

/* Информация о токенах */
.token-info {
    font-size: 14px;
    color: #757575;
    margin-top: 8px;
}

.device-info {
    font-size: 12px;
    color: #9e9e9e;
    margin-top: 4px;
    font-style: italic;
}

/* Кнопка создания алерта */
.button-alert {
    display: inline-block;
    margin: 16px auto 24px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 500;
    color: var(--tg-theme-button-text-color);
    background-color: var(--tg-theme-button-color);
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    text-shadow: none;
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.button-alert:hover {
    transform: translateY(-1px);
    background-color: #1f73bb;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06);
}

.button-alert:active {
    transform: translateY(0);
    background-color: #1b63aa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

@media (prefers-color-scheme: dark) {
    .button-alert {
        background-color: #2d7eb0;
        box-shadow: 0 3px 10px rgba(45, 126, 176, 0.2);
        letter-spacing: 0.01em;
    }
    .button-alert:hover {
        background-color: #2d85bd;
        box-shadow: 0 4px 15px rgba(45, 126, 176, 0.25);
    }
    .button-alert:active {
        background-color: #276d98;
        box-shadow: 0 2px 8px rgba(45, 126, 176, 0.15);
    }
    
    ul li, ol li {
        color: #e6e6e6;
    }
} 

/* Заголовок в контейнере, всегда принимает цвет из CSS-переменной */
.header h1 {
    color: var(--tg-theme-text-color) !important;
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Список алертов */
.alert-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.alert-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--tg-theme-secondary-bg-color);
    border-radius: 12px;
    padding: 10px 12px 10px 16px;
    margin-bottom: 10px;
    transition: all 0.2s ease, width 0.3s cubic-bezier(0.4,0,0.2,1);
    border-left: 3px solid transparent;
    opacity: 0.85;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Более компактные элементы списков символов внутри карточки */
#symbolsListCard .alert-item {
    margin: 0; /* убираем отступы между элементами */
    padding: 4px 6px; /* увеличили в 2 раза */
    align-items: stretch; /* растягиваем содержимое по высоте */
}

/* Вертикальная верстка: название сверху, состав снизу */
#symbolsListCard .alert-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; /* центрируем по вертикали */
    gap: 3px; /* небольшое расстояние между названием и описанием */
    height: 100%; /* занимаем всю высоту элемента */
}

#symbolsListCard .alert-text {
    flex: initial;
    width: 100%;
    line-height: 1.1; /* компактная высота строки */
    font-size: 13px; /* немного меньше размер шрифта */
}

#symbolsListCard .alert-symbol {
    line-height: 1.1; /* компактная высота строки */
    font-size: 14px; /* размер шрифта для названия */
    margin-bottom: 0; /* убираем отступ снизу */
}

/* Advanced mode: убираем сужение, только transition */
.alert-item.advanced-mode {
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* Чекбокс для advanced режима */
.alert-advanced-checkbox {
    margin-right: 12px;
    accent-color: #2481cc;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    transition: box-shadow 0.2s;
    border-radius: 4px;
}

.alert-item:hover {
    transform: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.alert-content {
    flex: 1;
    display: flex;
    align-items: center;
}

.alert-symbol {
    font-weight: 600;
    margin-right: 8px;
    font-size: 14px;
}

/* Название списка символов (вместо LIST) — чуть меньше размер */
.alert-symbol.list-name {
    font-size: 12px;
    opacity: 0.9;
    /* Ограничиваем ширину области названия списка, переносим в 2 строки с обрезкой */
    max-width: 55px !important; /* ещё уже */
    flex: 0 0 55px !important; /* фиксированная ширина во флексе */
    width: 55px !important;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 480px) {
    .alert-symbol.list-name {
        max-width: 60% !important;
        flex: 0 0 60% !important;
        -webkit-line-clamp: 3; /* на узких экранах можно до 3 строк */
    }
}

.alert-text {
    flex: 1;
    font-size: 13px;
    color: var(--tg-theme-hint-color);
}

.alert-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 0;
}

.action-btn {
    background: none;
    border: none;
    color: var(--tg-theme-hint-color);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--tg-theme-text-color);
}

.action-btn svg {
    width: 24px;
    height: 24px;
}

.action-btn.play-pause .pause-icon {
    display: none;
}

.action-btn.play-pause.active .play-icon {
    display: none;
}

.action-btn.play-pause.active .pause-icon {
    display: block;
}

.action-btn.play-pause.active {
    color: var(--tg-theme-button-color);
}

/* Добавляем стиль для подсветки при наведении на активную кнопку */
.action-btn.play-pause.active:hover {
    background-color: rgba(36, 129, 204, 0.1);
}

.action-btn.edit:hover {
    color: var(--tg-theme-link-color);
}

.action-btn.delete:hover {
    color: #e53935;
}

@media (prefers-color-scheme: dark) {
    .action-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
    
    .action-btn.delete:hover {
        color: #f44336;
    }
    
    .alert-item.active {
        background-color: rgba(45, 126, 176, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
}

/* Стиль для неактивных алертов */
.alert-item.inactive {
    opacity: 0.7;
    box-shadow: none;
}

/* Стиль для активных алертов */
.alert-item.active {
    border-left-color: var(--tg-theme-button-color);
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: rgba(36, 129, 204, 0.05);
}

/* Форма создания алерта */
.alert-creator {
    width: 100%;
    margin: 0 auto 6px; /* минимальный нижний отступ */
    position: relative;
}

.alert-form {
    background-color: var(--tg-theme-secondary-bg-color);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
    opacity: 1;
    transform: translateY(0);
}

.alert-form[style*="display: none"] {
    opacity: 0;
    transform: translateY(-10px);
}

.alert-form h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    color: var(--tg-theme-text-color);
    text-align: center;
    position: relative;
}

.alert-form h2:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: -10px;
    left: 0;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 16px;
}

/* Универсальный стиль для инпутов */
.form-control {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    height: 40px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--tg-theme-hint-color, #999999);
    background-color: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color, #000);
    transition: border-color 0.2s;
}

.form-control:focus {
    border-color: var(--tg-theme-button-color);
    outline: none;
}

.form-control.error {
    border-color: #e53935;
    background-color: rgba(229, 57, 53, 0.05);
}

.form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    gap: 10px;
}

.button-secondary {
    background-color: var(--tg-theme-secondary-bg-color);
    color: var(--tg-theme-text-color);
    border: 1px solid rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    padding: 8px 16px;
    font-size: 14px;
    flex: 1;
    border-radius: 6px;
}

.button-secondary:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button-primary {
    background-color: var(--tg-theme-secondary-bg-color);
    color: var(--tg-theme-text-color);
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    padding: 8px 16px;
    font-size: 14px;
    flex: 1;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.button-primary:hover {
    background-color: rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
    .alert-form {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .alert-form h2:after {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .form-control {
        border: 1px solid rgba(255, 255, 255, 0.15);
        background-color: var(--tg-theme-secondary-bg-color);
    }
    
    .button-secondary {
        border: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    .button-primary {
        border: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    .button-secondary:hover {
        background-color: rgba(255, 255, 255, 0.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .button-primary:hover {
        background-color: rgba(255, 255, 255, 0.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
}

/* Модификаторы кнопок */
.button-primary, .button-secondary {
    margin: 0;
}

.button-primary:first-child, 
.button-secondary:first-child {
    margin-left: 0;
}

.button-primary:last-child, 
.button-secondary:last-child {
    margin-right: 0;
}

@media (max-width: 480px) {
    .form-actions {
        flex-direction: row;
        gap: 8px;
    }
    
    .button-primary, .button-secondary {
        margin: 0;
        width: auto;
    }
}

/* Стили для выпадающего списка */
.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding-right: 30px;
    cursor: pointer;
}

.select-arrow {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--tg-theme-hint-color);
    pointer-events: none;
}

.select-wrapper select:focus + .select-arrow {
    border-top-color: var(--tg-theme-button-color);
}

@media (prefers-color-scheme: dark) {
    .select-wrapper select {
        background-color: var(--tg-theme-secondary-bg-color);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .select-wrapper select:focus {
        border-color: var(--tg-theme-button-color);
    }
    
    .select-arrow {
        border-top-color: rgba(255, 255, 255, 0.5);
    }
}

/* Кастомный выпадающий список для поиска символов */
.dropdown-list {
    position: absolute;
    z-index: 10;
    width: 100%;
    background: var(--tg-theme-bg-color);
    border: 1px solid var(--tg-theme-hint-color);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    top: 100%;
    left: 0;
}

/* Выпадающий список в форме создания списка символов должен быть поверх всех элементов */
#symbolsListDropdown {
    z-index: 9999 !important;
}

/* Красивый чекбокс для выбора символов */
.symbol-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--tg-theme-text-color);
    background: var(--tg-theme-bg-color);
    transition: all 0.15s ease;
    line-height: 1.2;
    user-select: none;
}

.symbol-checkbox:hover {
    background: var(--tg-theme-secondary-bg-color);
}

.symbol-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.symbol-checkbox-custom {
    position: relative;
    width: 18px;
    height: 18px;
    background: var(--tg-theme-bg-color);
    border: 2px solid var(--tg-theme-hint-color, #ccc);
    border-radius: 4px;
    margin-left: 12px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2;
}

.symbol-checkbox:hover .symbol-checkbox-custom {
    border-color: var(--tg-theme-button-color, #2481cc);
    background: rgba(36, 129, 204, 0.05);
}

.symbol-checkbox-input:checked + .symbol-checkbox-custom {
    background: var(--tg-theme-bg-color, #fff);
    border-color: var(--tg-theme-button-color, #2481cc);
}

.symbol-checkbox-input:checked + .symbol-checkbox-custom::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, var(--tg-theme-button-color, #2481cc) 0%, rgba(36, 129, 204, 0.8) 100%);
    border-radius: 50%;
    opacity: 1;
    transform: scale(1);
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(36, 129, 204, 0.3);
}

.symbol-checkbox-input:not(:checked) + .symbol-checkbox-custom::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, var(--tg-theme-button-color, #2481cc) 0%, rgba(36, 129, 204, 0.8) 100%);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.3);
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(36, 129, 204, 0.3);
}

.symbol-checkbox-text {
    flex: 1;
    font-weight: 500;
    order: 1;
}

.symbol-checkbox.selected {
    background: rgba(36, 129, 204, 0.1);
    color: var(--tg-theme-button-color, #2481cc);
}

.symbol-checkbox.selected .symbol-checkbox-custom {
    border-color: var(--tg-theme-button-color, #2481cc);
    background: var(--tg-theme-button-color, #2481cc);
}

/* Темная тема */
@media (prefers-color-scheme: dark) {
    .symbol-checkbox-custom {
        border-color: rgba(255, 255, 255, 0.3);
        background: var(--tg-theme-bg-color);
    }
    
    .symbol-checkbox:hover .symbol-checkbox-custom {
        border-color: #2aabee;
        background: rgba(42, 171, 238, 0.1);
    }
    
    .symbol-checkbox-input:checked + .symbol-checkbox-custom {
        background: var(--tg-theme-bg-color, #23272e);
        border-color: #2aabee;
    }
    
    .symbol-checkbox-input:checked + .symbol-checkbox-custom::after {
        background: linear-gradient(135deg, #2aabee 0%, rgba(42, 171, 238, 0.8) 100%);
        box-shadow: 0 1px 3px rgba(42, 171, 238, 0.3);
    }
    
    .symbol-checkbox.selected {
        background: rgba(42, 171, 238, 0.15);
        color: #2aabee;
    }
    
    .symbol-checkbox.selected .symbol-checkbox-custom {
        border-color: #2aabee;
        background: var(--tg-theme-bg-color, #23272e);
    }
}

/* Форма создания списка символов должна быть поверх других элементов */
.alert-form {
    position: relative;
    z-index: 1000;
}

/* Контейнер выпадающего списка символов должен иметь правильное позиционирование */
#symbolsListInputContainer {
    position: relative !important;
    z-index: 1001;
}

.dropdown-list li {
    padding: 7px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--tg-theme-text-color);
    background: var(--tg-theme-bg-color);
    transition: background 0.15s;
    line-height: 1.2;
}

.dropdown-list li:hover {
    background: var(--tg-theme-secondary-bg-color);
}

.select-wrapper input.form-control {
    font-size: 14px;
    height: 38px;
}

/* Стили для выпадающего списка метрик */
#metricDropdown {
    margin-top: 4px;
}

#metricDropdown li {
    font-size: 13px;
    padding: 7px 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

#metricDropdown li:hover {
    background-color: var(--tg-theme-secondary-bg-color);
}

/* Лейблы */
.form-group label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--tg-theme-text-color, #000);
}

/* Выпадающие списки */
.dropdown-list,
#metricDropdown,
#depthDropdown,
#symbolDropdown {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    padding: 0;
    border-radius: 8px;
    max-height: 300px;
    min-width: 220px;
}

.dropdown-list li,
#metricDropdown li,
#depthDropdown li,
#symbolDropdown li {
    padding: 7px 14px;
    font-size: 14px;
    color: var(--tg-theme-text-color, #000);
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.2;
}

.dropdown-list li:hover,
#metricDropdown li:hover,
#depthDropdown li:hover,
#symbolDropdown li:hover {
    background: var(--tg-theme-secondary-bg-color, #f0f0f0);
}

/* Кнопки */
.button,
.button-alert,
.button-primary,
.button-secondary {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
}

/* Отступы между элементами формы */
.form-group {
    margin-bottom: 16px;
}

/* Стили для блока с сообщением об истечении подписки */
.subscription-expired {
    margin: 20px auto;
    padding: 20px;
    background-color: rgba(229, 57, 53, 0.1);
    border: 1px solid #e53935;
    border-radius: 8px;
    text-align: center;
    max-width: 90%;
}

.expired-message {
    margin-bottom: 15px;
    font-size: 16px;
    color: var(--tg-theme-text-color);
}

.goto-bot-btn {
    background-color: #e53935;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.goto-bot-btn:hover {
    background-color: #c62828;
}

#valueInputContainer {
    transition: max-height 0.3s, opacity 0.3s;
    overflow: hidden;
    max-height: 100px;
    opacity: 1;
}
#valueInputContainer[style*="display: none"] {
    max-height: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
}

.value-input-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}
.value-input-wrapper input.form-control {
    flex: 1 1 auto;
    padding-right: 54px; /* место для стрелок и символа */
    min-width: 0;
}
.input-unit {
    position: absolute;
    right: 38px;
    pointer-events: none;
    color: #888;
    font-size: 1em;
    z-index: 2;
    background: transparent;
    padding-left: 2px;
}
.value-arrows {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 3;
}
.value-arrows .arrow-btn {
    width: 22px;
    height: 18px;
    padding: 0;
    font-size: 1em;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s;
}
.value-arrows .arrow-btn:hover {
    color: #2aabee;
}

#customMsgContainer {
    margin-top: 8px;
}
#customMsgInput {
    min-height: 128px;
    line-height: 1.5;
    padding: 10px 48px 10px 12px;
    font-size: 16px;
    resize: vertical;
    border-radius: 12px;
}

/* Стили для textarea списка символов */
#symbolsListItemsInput {
    min-height: 40px;
    max-height: 200px;
    line-height: 1.4;
    padding: 10px 12px;
    font-size: 14px;
    resize: none;
    border-radius: 8px;
    transition: height 0.28s ease;
    overflow-y: hidden;
    word-wrap: break-word;
    white-space: pre-wrap;
    will-change: height;
}
.msg-example {
    font-size: 13px;
    color: var(--tg-theme-hint-color, #999999);
    margin-top: 4px;
    margin-bottom: 2px;
    font-style: italic;
}
.msg-counter {
    font-size: 12px;
    color: var(--tg-theme-hint-color, #999999);
    text-align: right;
    margin-top: 6px;
    margin-bottom: 0;
}
.msg-counter.over {
    color: #e53935;
    font-weight: 600;
}

.tg-message-mock {
    background: #23272a;
    color: #e1e1e1;
    border-radius: 16px 16px 16px 4px;
    padding: 12px 16px 8px 16px;
    margin-top: 12px;
    margin-bottom: 0;
    max-width: 90%;
    min-height: 32px;
    font-size: 15px;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    position: relative;
    word-break: break-word;
    white-space: pre-line;
}
.tg-message-mock .tg-time {
    display: block;
    text-align: right;
    margin-top: 6px;
    font-size: 12px;
    color: #b0b3b8;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    opacity: 0.7;
    position: static;
}

.emoji-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 4px 0;
    justify-content: flex-start;
}
.emoji-btn {
    background: var(--tg-theme-secondary-bg-color, #23272a);
    border: 1px solid var(--tg-theme-hint-color, #999999);
    border-radius: 6px;
    font-size: 16px;
    padding: 0 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    outline: none;
    line-height: 1.1;
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emoji-btn:hover, .emoji-btn:focus {
    background: var(--tg-theme-button-color, #2481cc);
    color: #fff;
    border-color: var(--tg-theme-button-color, #2481cc);
    box-shadow: 0 2px 8px rgba(36,129,204,0.10);
}

/* --- TOAST (ВСПЛЫВАЮЩЕЕ ОКНО) --- */
.toast-msg {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 90vw;
    background: #23272a;
    color: #fff;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    z-index: 9999;
    opacity: 0.4;
    display: none;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.3s, bottom 0.3s;
    backdrop-filter: blur(8px);
}
.toast-success {
    background: #2481cc;
    color: #fff;
}
.toast-error {
    background: #e53935;
    color: #fff;
}
@media (prefers-color-scheme: dark) {
    .toast-msg {
        background: #23272a;
        color: #fff;
    }
    .toast-success {
        background: #2481cc;
    }
    .toast-error {
        background: #e53935;
    }
}

/* Скрыть стандартные стрелки у input[type=number] (для кастомных стрелок) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Стили для неактивного поля сравнения */
#comparisonInput.disabled,
#comparisonInput:disabled {
    background-color: var(--tg-theme-secondary-bg-color, #f0f0f0);
    color: var(--tg-theme-hint-color, #999999);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Стили для неактивных (disabled) полей метрики и глубины */
#metricInput.disabled,
#metricInput:disabled,
#depthInput.disabled,
#depthInput:disabled {
    background-color: var(--tg-theme-secondary-bg-color, #f0f0f0);
    color: var(--tg-theme-hint-color, #999999);
    cursor: not-allowed;
    opacity: 0.7;
}

.alert-limit-msg {
    color: #d32f2f;
    background: #fff3f3;
    border: 1px solid #f8d7da;
    border-radius: 8px;
    padding: 10px 16px;
    margin: 12px 0 0 0;
    font-size: 15px;
    text-align: center;
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    display: none;
}

#valueOrMetricSwitcher {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 12px 0 0 0;
    padding: 0;
    min-height: 0;
}
.switcher-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 3px 22px;
    border: none;
    outline: none;
    font-size: 0.97em;
    font-weight: 500;
    background: var(--tg-theme-secondary-bg-color, #f0f0f0);
    color: var(--tg-theme-text-color, #222);
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    border-radius: 0;
    margin: 14px 0 0 0;
    border-right: 1px solid #d0d0d0;
    position: relative;
    z-index: 1;
    min-height: 24px;
    line-height: 1.2;
}
.switcher-btn:first-child {
    border-radius: 10px 0 0 10px;
}
.switcher-btn:last-child {
    border-radius: 0 10px 10px 0;
    border-right: none;
}
.switcher-btn.active {
    background: var(--tg-theme-button-color, #2aabee);
    color: var(--tg-theme-button-text-color, #fff);
    box-shadow: 0 2px 8px rgba(42,171,238,0.10);
    z-index: 2;
}
.switcher-btn:not(.active):hover {
    background: #e0e0e0;
    color: #111;
}
#valueOrMetricSwitcher + #valueInputContainer,
#valueOrMetricSwitcher + #metricInputContainer {
    margin-top: 10px;
}
@media (prefers-color-scheme: dark) {
    #valueOrMetricSwitcher {
        background: none;
    }
    .switcher-btn {
        background: #23272e;
        color: #eee;
        border-right: 1px solid #333;
        box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    }
    .switcher-btn.active {
        background: #2aabee;
        color: #fff;
        box-shadow: 0 2px 8px rgba(42,171,238,0.18);
    }
    .switcher-btn:not(.active):hover {
        background: #2c2f36;
        color: #fff;
    }
}

#metricInputContainer {
    margin-top: 10px;
}

/* Мини-чекбокс для фильтра неактивных алертов */
.hide-inactive-checkbox-label {
    font-size: 13px;
    color: var(--tg-theme-hint-color, #888);
    cursor: pointer;
    user-select: none;
    gap: 4px;
    font-weight: 400;
    margin-left: 0;
}
.hide-inactive-checkbox-block {
    margin-top: 8px;
    margin-left: 6px;
    text-align: left;
}
.hide-inactive-checkbox-label input[type="checkbox"] {
    accent-color: #2481cc;
    width: 15px;
    height: 15px;
    margin: 0 4px 0 0;
    vertical-align: middle;
    border-radius: 4px;
    transition: box-shadow 0.2s;
}
.hide-inactive-checkbox-label input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px #2481cc33;
}

.variables-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 8px 0;
    padding: 8px;
    border-radius: 10px;
    background: var(--tg-theme-secondary-bg-color, #f0f0f0);
    border: 1px solid rgba(0,0,0,0.08);
}
.variable-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    padding: 0 8px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    outline: none;
    line-height: 1.1;
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tg-theme-text-color, #222);
}
.variable-btn:hover, .variable-btn:focus {
    background: var(--tg-theme-secondary-bg-color, #f0f0f0);
    color: var(--tg-theme-text-color, #000);
}
@media (prefers-color-scheme: dark) {
    .variable-btn:hover, .variable-btn:focus {
        background: #23272e;
        color: #fff;
    }
    .variables-panel {
        background: #23272e;
        border-color: rgba(255,255,255,0.08);
    }
}

/* --- Мульти-алерт: компактный список выбранных алертов --- */
.multi-alert-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
}
.multi-alert-item {
    display: flex;
    align-items: center;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 2px 0 2px 0;
    margin: 0;
    font-size: 13px;
    color: var(--tg-theme-hint-color, #888);
    min-height: 0;
}
.multi-alert-item .multi-alert-letter {
    /* Минималистичный кружок-индикатор внутри списка условий */
    --ml-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ml-size);
    height: var(--ml-size);
    min-width: var(--ml-size);
    min-height: var(--ml-size);
    border-radius: 50%;
    border: 1.8px solid var(--tg-theme-button-color, #2481cc);
    background: rgba(36, 129, 204, 0.06);
    color: var(--tg-theme-button-color, #2481cc);
    font-size: 13px;
    font-weight: 600;
    margin-right: 6px;
    letter-spacing: 0.4px;
    box-shadow: none;
}
@media (prefers-color-scheme: dark) {
    .multi-alert-item .multi-alert-letter {
        background: rgba(36, 129, 204, 0.18);
        border-color: rgba(90, 162, 230, 0.7);
        color: #b8d1ff;
    }
}
.multi-alert-symbol {
    font-weight: 500;
    font-size: 12px;
    margin-right: 6px;
    color: var(--tg-theme-text-color, #e0e0e0);
    text-transform: none;
}
.multi-alert-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--tg-theme-hint-color, #aaa);
}
.multi-alert-edit-icon {
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    margin-right: 8px;
}

.multi-alert-logic-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
    margin-top: 0;
}
.multi-alert-logic-select {
    font-size: 16px;
    padding: 7px 36px 7px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--tg-theme-hint-color, #b0b3b8);
    background: var(--tg-theme-secondary-bg-color, #f0f0f0) url('data:image/svg+xml;utf8,<svg fill="%23999" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7.293 7.293a1 1 0 011.414 0L10 8.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414z"/></svg>') no-repeat right 12px center/18px 18px;
    color: var(--tg-theme-text-color, #222);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    margin: 0 2px 18px 2px;
    min-width: 220px;
    max-width: 100%;
    box-shadow: 0 2px 8px rgba(36,129,204,0.04);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-weight: 500;
    margin-top: 0;
}
.multi-alert-logic-select:focus {
    border-color: var(--tg-theme-button-color, #2481cc);
    box-shadow: 0 0 0 2px #2481cc22;
}
.multi-alert-logic-select option {
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color, #222);
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 0;
    font-weight: 500;
}
@media (prefers-color-scheme: dark) {
    .multi-alert-logic-select {
        background: #23272e url('data:image/svg+xml;utf8,<svg fill="%23b0b3b8" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7.293 7.293a1 1 0 011.414 0L10 8.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414z"/></svg>') no-repeat right 12px center/18px 18px;
        color: #e1e1e1;
        border-color: #444;
    }
    .multi-alert-logic-select option {
        background: #23272e;
        color: #e1e1e1;
    }
}
.multi-alert-logic-select:hover, .multi-alert-logic-select:active {
    border-color: var(--tg-theme-button-color, #2481cc);
    box-shadow: 0 2px 8px rgba(36,129,204,0.10);
}

.multi-alert-logic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    color: var(--tg-theme-hint-color, #aaa);
    font-size: 10px;
    font-weight: 700;
    margin: 0 2px;
    cursor: pointer;
    user-select: none;
    border: none;
    transition: color 0.18s;
    letter-spacing: 0.2px;
    padding: 0;
}
.multi-alert-logic-btn.and,
.multi-alert-logic-btn.or {
    background: transparent;
    color: var(--tg-theme-hint-color, #aaa);
    border: none;
}
.multi-alert-logic-btn:hover {
    color: var(--tg-theme-text-color, #fff);
    background: rgba(36,129,204,0.08);
}
.multi-alert-bracket {
    font-size: 17px;
    color: var(--tg-theme-hint-color, #888);
    font-weight: 700;
    margin: 0 2px;
    user-select: none;
    pointer-events: none;
    transition: color 0.18s;
    line-height: 1;
    vertical-align: middle;
}
.multi-alert-bracket.open {
    margin-right: 2px;
}
.multi-alert-bracket.close {
    margin-left: 2px;
}

.multi-alert-move {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.multi-alert-move button {
    background: none;
    border: none;
    color: #2481cc;
    font-size: 15px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.multi-alert-move button:disabled {
    color: #bbb;
    cursor: default;
    background: none;
}
.multi-alert-move button:hover:not(:disabled) {
    background: #e6f0fa;
    color: #1866a3;
}
@media (prefers-color-scheme: dark) {
    .multi-alert-move button:hover:not(:disabled) {
        background: #23384d;
        color: #6cb6ff;
    }
}

.multi-alert-divider {
    width: 100%;
    height: 1.5px;
    border: none;
    margin: 12px 0 16px 0;
    background: linear-gradient(90deg, rgba(74,144,226,0) 0%, #4a90e2 50%, rgba(74,144,226,0) 100%);
    opacity: 0.35;
}
@media (prefers-color-scheme: dark) {
    .multi-alert-divider {
        background: linear-gradient(90deg, rgba(74,144,226,0) 0%, #4a90e2 50%, rgba(74,144,226,0) 100%);
        opacity: 0.22;
    }
}

/* === Новый мульти-алерт === */
.multi-alert-card {
    position: relative;
    background: rgba(245,247,255,0.95);
    border: 3px solid #6b7bbd;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(91,109,250,0.13);
    padding: 22px 24px 18px 24px;
    margin-bottom: 28px;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
    overflow: visible; /* позволяем видеть перетаскиваемый элемент */
}
@media (prefers-color-scheme: dark) {
    .multi-alert-card {
        background: rgba(35,36,58,0.98);
        border-color: #7a8cff;
        box-shadow: 0 8px 32px rgba(91,109,250,0.18);
    }
}
.multi-alert-badge {
    position: absolute;
    top: -10px;
    left: 4px;
    background: transparent;
    color: #4caf50;
    border-radius: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    font-size: 16px;
    font-weight: bold;
    border: none;
    z-index: 2;
    padding: 0;
}
.multi-alert-formula {
    text-align: center;
    font-size: 1.22em;
    font-weight: 900;
    color: #2a2a5a;
    margin-bottom: 18px;
    letter-spacing: 1.2px;
}
@media (prefers-color-scheme: dark) {
    .multi-alert-formula {
        color: #bfc6ff;
    }
}
.multi-alert-conditions {
    margin: 0 0 18px 0;
    padding: 0;
    list-style: none;
}
.multi-alert-conditions li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 1.08em;
}
.multi-alert-card .multi-alert-letter {
    /* Кружок в карточке мульти-алерта */
    --mlc-size: 28px;
    width: var(--mlc-size);
    height: var(--mlc-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--tg-theme-button-color, #2481cc);
    background: rgba(36, 129, 204, 0.10);
    color: var(--tg-theme-button-text-color, #fff);
    font-weight: 700;
    font-size: 15px;
    box-shadow: none;
}
@media (prefers-color-scheme: dark) {
    .multi-alert-card .multi-alert-letter {
        background: rgba(123, 145, 255, 0.20);
        border-color: rgba(123, 145, 255, 0.8);
        color: #ffffff;
    }
}
.multi-alert-symbol {
    font-weight: 500;
    color: #2481cc;
    margin-right: 8px;
    font-size: 13px;
}
/* ---------- Multi-alert condition text ---------- */
.multi-alert-text {
    /* универсальный цвет, берём из темы Telegram */
    color: var(--tg-theme-text-color);
    font-weight: 400;
    font-size: 13px;
}

/* Тёмная тема (оставляем ту же переменную — она уже даёт нужный оттенок) */
@media (prefers-color-scheme: dark) {
    .multi-alert-text {
        color: var(--tg-theme-text-color);
    }
}

.multi-alert-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin-top: 0;
}
.multi-alert-actions .action-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: none;
    color: #6b7bbd;
    transition: background 0.18s, color 0.18s;
}
.multi-alert-actions .action-btn:hover {
    background: #e6eaff;
    color: #2481cc;
}
@media (prefers-color-scheme: dark) {
    .multi-alert-actions .action-btn:hover {
        background: #2d2e4a;
        color: #bfc6ff;
    }
}
.multi-alert-actions .pause {
    font-size: 16px;
    color: #6b7bbd;
    font-weight: 700;
    margin-left: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ---- Multi-alert conditions columns ---- */
.multi-conds .multi-cond {
    display: flex;
    align-items: flex-start;
    margin: 2px 0;
}

.multi-cond-letter {
    display: inline-block;
    width: 24px; /* фиксированная ширина колонки для A:, B:, ... */
    font-weight: 700;
    flex-shrink: 0;
}

.multi-cond-text {
    display: inline-block;
    word-break: break-word;
}

/* === Блок уникального ID алерта === */
.alert-id {
    position: absolute;
    bottom: 1px;
    right: 15px;
    font-family: 'Inter', monospace;
    font-size: 9px;
    font-weight: 500;
    color: #444;
    background-color: rgba(0, 0, 0, 0.03);
    border: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1.15;
    z-index: 2;
}
.alert-id:hover {
    background-color: var(--tg-theme-button-color, #2481cc);
    color: #fff;
}
@media (prefers-color-scheme: dark) {
    .alert-id {
        color: #bbb;
        background-color: rgba(255, 255, 255, 0.04);
        border: none;
        right: 15px;
    }
    .alert-id:hover {
        background-color: #2aabee;
    }
}

/* --- Modern grip-style drag handle --- */
.alert-handle {
    position: absolute;
    right: 0;
    top: 0;
    width: 12px;
    height: 100%;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: rgba(0,0,0,0.35); /* dots color */
    background: rgba(0,0,0,0.06); /* видимая тонкая полоса */
    transition: background 0.18s, color 0.18s;
    touch-action: none; /* отключаем скролл при перетаскивании на мобильных устройствах */
}
.alert-handle::before {
    content: '';
    display: block;
    width: 4px;
    height: 66%;
    background-image: repeating-linear-gradient(
        to bottom,
        currentColor 0 2px,
        transparent 2px 6px
    );
    border-radius: 2px;
}
.alert-item:hover .alert-handle {
    color: var(--tg-theme-button-color, #2481cc);
    background: rgba(36,129,204,0.08);
}
.alert-handle:active { cursor: grabbing; }
@media (prefers-color-scheme: dark) {
    .alert-handle {
        color: rgba(255,255,255,0.45);
        background: rgba(255,255,255,0.04);
    }
}

.alert-item.dragging {
    opacity: 0.95;
    cursor: grabbing;
    pointer-events: none;
    /* лёгкое увеличение + тень для более плавного визуального эффекта */
    transform: scale(1.03) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

.alert-item.placeholder {
    opacity: 0.3;
    border: 2px dashed var(--tg-theme-hint-color, #999);
}

/* Космическая плоская кнопка для группировки */
.alert-group-btn {
    width: 100%;
    padding: 4px 0; /* в два раза тоньше */
    margin: 14px 0 0 0; /* сверху, без нижнего отступа */
    background: radial-gradient(ellipse 100% 55% at center, rgba(36,129,204,0.9) 0%, rgba(36,129,204,0.25) 40%, rgba(36,129,204,0.05) 65%, rgba(36,129,204,0) 100%);
    color: var(--tg-theme-button-text-color, #ffffff);
    border: none;
    border-radius: 9999px;
    font-size: 0; /* скрываем текст, используем иконку */
    line-height: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.18s;
}

.alert-group-btn svg {
    pointer-events: none;
    color: var(--tg-theme-button-text-color, #ffffff);
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.55));
}

.alert-group-btn:hover {
    box-shadow: 0 0 8px rgba(36,129,204,0.75);
}


/* === Группа алертов === */
.alert-item.group-block {
    background: rgba(36, 129, 204, 0.15);
    border-left-color: transparent;
    opacity: 1;
}
.alert-item.group-block .alert-text {
    color: var(--tg-theme-text-color);
    font-weight: 600;
    font-size: 14px;
}

@media (prefers-color-scheme: dark) {
    .alert-item.group-block {
        background: rgba(36, 129, 204, 0.25);
    }
}

/* === Карточка группы алертов === */
.alert-group-card {
    border: 2px solid #2481cc;
    border-radius: 16px; /* было 20px */
    margin: 0 0 2px 0; /* ещё меньше расстояние между блоками */
    overflow: hidden;
    background: var(--tg-theme-secondary-bg-color, #f0f0f0);
    list-style: none;
    position: relative;
}

.alert-group-card .group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px; /* было 7px 14px */
    background: rgba(36,129,204,0.07);
    border-bottom: 1px solid rgba(36,129,204,0.25);
    transition: background-color 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.alert-group-card .group-header:hover {
    background: rgba(36,129,204,0.12);
}

.alert-group-card .group-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--tg-theme-text-color);
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-group-card .group-title[contenteditable="true"] {
    transition: background-color 0.2s ease;
}

.alert-group-card .group-title[contenteditable="true"]:focus {
    border-bottom: 1px dashed var(--tg-theme-button-color, #2481cc);
    background-color: rgba(36, 129, 204, 0.1);
}

.alert-group-card .group-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.alert-group-card .group-actions .action-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.alert-group-card .group-alerts {
    list-style: none;
    margin: 0;
    padding: 4px 0; /* минимальные внутренние отступы */
    display: flex;
    flex-direction: column;
    gap: 2px; /* минимальный промежуток между элементами */
    justify-content: center;
    align-items: center;
}

.group-alert-placeholder {
    font-size: 20px;
    font-weight: 600;
    color: #2481cc;
    opacity: 0.35;
    user-select: none;
}

@media (prefers-color-scheme: dark) {
    .alert-group-card {
        background: #23272e;
        border-color: #2aabee;
    }
    .alert-group-card .group-header {
        background: rgba(42,171,238,0.12);
        border-bottom-color: rgba(42,171,238,0.35);
    }
    
    .alert-group-card .group-header:hover {
        background: rgba(42,171,238,0.18);
    }
    .group-alert-placeholder {
        color: #2aabee;
        opacity: 0.4;
    }
}

/* --- Алерты внутри группы --- */
.alert-group-card .alert-item {
    width: calc(100% - 12px);
    margin: 0 6px 8px 6px; /* увеличили в 2 раза */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.alert-group-card .alert-item:last-child {
    margin-bottom: 0; /* минимальный нижний отступ у последнего */
}
.alert-group-card .alert-item.in-group {
    opacity: 1;
}
/* Ручка перемещения остаётся видимой */
.alert-group-card .alert-item .alert-handle {
    display: flex;
}

/* Подсветка зоны приёма (более лёгкая) */
.group-drop-hover {
    outline: 1.5px dashed rgba(36,129,204,0.55);
}
@media (prefers-color-scheme: dark) {
    .group-drop-hover {
        outline-color: rgba(42,171,238,0.55);
    }
}

/* Подсветка всей карточки при hover (менее яркая) */
.alert-group-card.drop-hover {
    box-shadow: 0 0 0 2px rgba(36,129,204,0.45) inset;
}
@media (prefers-color-scheme: dark) {
    .alert-group-card.drop-hover {
        box-shadow: 0 0 0 2px rgba(42,171,238,0.45) inset;
    }
}

/* Отступы внутри списка группы (сжатые) */
.alert-group-card .group-alerts {
    gap: 2px; /* уменьшили в 2 раза для элементов списка */
    padding: 8px 0; /* оставили как есть */
}

/* === Переключатель сворачивания/разворачивания группы === */
.group-toggle {
    cursor: pointer;
    user-select: none;
    font-size: 16px;
    line-height: 1;
    margin-right: 6px;
    color: var(--tg-theme-text-color);
}

/* Скрываем список при сложении */
.alert-group-card.collapsed .group-alerts {
    display: none;
}

/* Убираем нижнее скругление ручки перетаскивания в шапке карточки группы */
.alert-group-card .group-header .alert-handle {
    border-bottom-right-radius: 0;
}

/* === добавлено: кнопка-палитра === */
.action-btn.color {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 50%;
    padding: 0;
    width: 20px;
    height: 20px;
}
.action-btn.color::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}
.action-btn.color:hover::before {
    filter: brightness(1.1) saturate(1.2);
}
@media (prefers-color-scheme: dark) {
    .action-btn.color { border: none; }
}

/* размеры play/pause и delete крупнее */
.alert-group-card .group-actions .action-btn.play-pause,
.alert-group-card .group-actions .action-btn.delete {
    width: 40px;
    height: 40px;
}

/* приоритетное переопределение размеров палитры */
.group-actions .action-btn.color {
    width: 18px !important;
    height: 18px !important;
}

/* === Кнопка создания списка символов === */
.create-list-button {
    width: calc(100% - 6%);
    height: 100%;
    min-height: 28px;
    margin: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(36, 129, 204, 0.05);
    border: 1px dashed rgba(36, 129, 204, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--tg-theme-text-color);
    font-size: 14px;
    font-weight: 500;
}

.create-list-button:hover {
    background: rgba(36, 129, 204, 0.1);
    border-color: rgba(36, 129, 204, 0.5);
}

/* chips для быстрого добавления символов в форму списка */
.symbols-suggestions {
    margin-bottom: 8px;
}
.symbols-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.symbol-chip {
    padding: 6px 10px;
    border-radius: 16px;
    border: 1px solid rgba(36,129,204,0.35);
    background: rgba(36,129,204,0.06);
    color: var(--tg-theme-text-color);
    cursor: pointer;
    font-size: 13px;
}
.symbol-chip:hover {
    background: rgba(36,129,204,0.12);
}

@media (prefers-color-scheme: dark) {
    .create-list-button {
        background: rgba(42, 171, 238, 0.05);
        border-color: rgba(42, 171, 238, 0.3);
        color: var(--tg-theme-text-color);
    }
    
    .create-list-button:hover {
        background: rgba(42, 171, 238, 0.1);
        border-color: rgba(42, 171, 238, 0.5);
    }
}

/* Чтобы основной текст не залезал на колонку названия списка */
.alert-item .alert-content { gap: 8px; }
.alert-item .alert-content .alert-text { min-width: 0; flex: 1 1 auto; }