/* Ключевые кадры для эффекта пульсации */
@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
        /* Пульсация до 30% прозрачности */
    }

    100% {
        opacity: 1;
    }
}

/* Класс, который будет добавляться к вашему SVG-элементу во время записи */
.mic_icon.is-pulsing {
    animation: pulse 1s infinite ease-in-out;
    color: red;
    /* Применяет анимацию пульсации бесконечно */
}

/* Анимация пульсации бордера */
@keyframes botBorderPulse {
    0% {
        border-left-color: var(--loading-border-color, rgba(0, 0, 0, 1));
    }

    50% {
        border-left-color: rgba(0, 0, 0, 0);
    }

    100% {
        border-left-color: var(--loading-border-color, rgba(0, 0, 0, 1));
    }
}


/* Пока сообщение пустое (ожидание стриминга) - caret пульсирует */
.caret.is-loading {
    border-left: .05em solid var(--loading-border-color, rgba(0, 0, 0, 1));
    animation: botBorderPulse 0.3s ease-in-out infinite;
}


/* Стили для некликабельных чипсов */
.var-chips.disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: default;
}

/* Сохраняем фон textarea при disabled только через класс .inactive */
.textarea:disabled {
    background-color: inherit !important;
}

.textarea.inactive:disabled {
    background-color: var(--bg_input_inacive) !important;
}

.w-webflow-badge {

    margin: -200% !important;
}

/* Эмулируем состояние :focus при наличии выбранных нод */
.textarea.focused {
    min-height: 5em;
    max-height: 50em;
    padding-bottom: var(--10);
    border-color: var(--gray_border);
}

.node-circle.selected-active {
    fill: var(--purp) !important;
    stroke: var(--purp) !important;
}

/* --- Fit Dashboard Animations --- */

.match-circle, .cover-circle {
    /* Начальное состояние: пустой круг (серый фон) */
    background: conic-gradient(var(--purp) 0deg, var(--bg) 0deg);
    position: relative;
}

/* Создаем "пончик" с помощью псевдоэлемента */
.match-circle::before, .cover-circle::before {
    content: "";
    position: absolute;
    width: 80%; /* Толщина кольца */
    height: 80%;
    background: var(--bg); /* Цвет фона карточки */
    border-radius: 50%;
    z-index: 1;
}

/* Убеждаемся, что текст поверх круга */
.match_score, .text-block-4 {
    position: relative;
    z-index: 2;
}

/* Fade анимация для переключения графов */
.arch-graph-container,
.cv-graph-container,
.product-graph-container,
.prompting-graph-container,
.mas-graph-container {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  pointer-events: none;
}

.arch-graph-container.current,
.cv-graph-container.current,
.product-graph-container.current,
.prompting-graph-container.current,
.mas-graph-container.current {
  opacity: 1;
  pointer-events: auto;
}

.arch-graph-container.off,
.cv-graph-container.off,
.product-graph-container.off,
.prompting-graph-container.off,
.mas-graph-container.off {
  opacity: 0;
  pointer-events: none;
}

.node-circle.selected-active {
    stroke: transparent !important;
}

.hidden_library {
  display: none !important;
}