/* ==========================================================================
   RAMSTAT Interactive Tour for AI Autoresponder (wb_ar_tour.css)
   Обучалка для раздела «ИИ-автоответчик» (/wb/autoresponder/)
   Использует SVG-вырез (cutout с fill-rule="evenodd") по аналогии с генерацией фото:
   просто убирает затемнение на активной области без выдвижения плашек,
   искусственных отступов, рамок и смещения верстки.
   ========================================================================== */

/* 1. SVG Оверлей с вырезом под активный элемент */
svg.wb-tour-backdrop {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483610 !important;
    opacity: 0;
    background: transparent !important;
    background-color: transparent !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease;
}

svg.wb-tour-backdrop.is-active {
    display: block !important;
    opacity: 1 !important;
}

/* Затененная часть SVG блокирует случайные клики по фону, а вырез пропускает клики насквозь */
svg.wb-tour-backdrop path {
    pointer-events: auto !important;
    cursor: default;
}

/* 2. Фокусировочная рамка (Spotlight) полностью отключена */
.wb-tour-spotlight {
    display: none !important;
    opacity: 0 !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* 3. Карточка тура и кнопка запуска поверх оверлея */
.wb-tour-card {
    z-index: 2147483645 !important;
}

.wb-tour-launcher {
    z-index: 2147483605 !important;
}

/* Отключаем анимацию вкладок во время переключения шагов тура, чтобы координаты считались мгновенно */
body.wb-tour-active .ar-tab-pane {
    animation: none !important;
    transform: none !important;
}

/* 4. Сбрасываем принудительный подъем/плашки из базового wb_tour.css:
      активные элементы остаются в своем естественном виде на странице,
      с них просто убирается затемнение через вырез в SVG */
.wb-tour-target-active {
    z-index: auto !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

#ar-mode-segmented.wb-tour-target-active,
#ar-main-tabs.wb-tour-target-active,
#ar-products-action-buttons.wb-tour-target-active,
#ar-threshold-box.wb-tour-target-active,
.ar-threshold-control.wb-tour-target-active,
.ar-stop-topics-grid.wb-tour-target-active,
#sim-product-group.wb-tour-target-active,
#sim-question-group.wb-tour-target-active,
#sim-result.wb-tour-target-active,
#tab-templates.wb-tour-target-active,
#tab-settings-sim.wb-tour-target-active,
#tab-questions.wb-tour-target-active,
#tab-knowledge.wb-tour-target-active,
#tab-products.wb-tour-target-active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.ar-nav-tab.active.wb-tour-target-active,
.ar-segmented-btn.active.wb-tour-target-active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--ar-orange, #ff6d00) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.ar-section.wb-tour-target-active,
#ar-questions-section.wb-tour-target-active,
#ar-products-section.wb-tour-target-active,
#ar-knowledge-table-section.wb-tour-target-active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
}

#drop-zone.wb-tour-target-active,
.ar-upload-card.wb-tour-target-active {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    box-shadow: none !important;
}

/* Кнопка «Симулировать вопрос» сохраняет свой естественный вид */
#sim-btn.wb-tour-target-active {
    background: linear-gradient(135deg, var(--ar-orange-start, #ff1d25) 0%, var(--ar-orange-end, #ff840b) 100%) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* 5. Кнопка «Пройти обучение» в правом верхнем углу на финальном шаге быстрого тура:
      мгновенно разворачивается на полную ширину под SVG-вырез */
.wb-tour-launcher.wb-tour-launcher-step-active {
    z-index: 2147483605 !important;
    transform: translateX(0) !important;
    transition: none !important;
    pointer-events: auto !important;
    box-shadow: -4px 6px 20px rgba(255, 29, 37, 0.35) !important;
}

.wb-tour-launcher.wb-tour-launcher-step-active .wb-tour-launcher-text {
    opacity: 1 !important;
    transition: none !important;
}

.wb-tour-launcher.wb-tour-launcher-step-active .wb-tour-launcher-arrow {
    opacity: 0 !important;
    width: 0 !important;
    margin-right: 0 !important;
    transition: none !important;
}

/* На мобильных устройствах при развернутом сайдбаре скрываем флажок обучения */
@media (max-width: 768px) {
    body.sidebar-mobile-open .wb-tour-launcher,
    body:has(#mainSidebar:not(.collapsed)) .wb-tour-launcher {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Индикатор успешной загрузки демо базы знаний */
.wb-tour-kb-loaded-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    margin-top: 10px;
    animation: arTourFadeIn 0.3s ease;
}

@keyframes arTourFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   АДАПТИВ ОБУЧАЮЩЕГО ТУРА: MacBook Air 13, Планшеты и Мобильные телефоны
   ========================================================================== */

/* MacBook Air 13 / компактные ноутбуки (1025px — 1512px):
   Правый сайдбар сжат до 280px, поэтому стандартная карточка 400px не помещается справа
   и перекрывает активную область. Уменьшаем ширину карточки до 296px, чтобы она
   всегда аккуратно вставала поверх затемненного правого сайдбара и не закрывала поля. */
@media (min-width: 1025px) and (max-width: 1512px) {
    .wb-tour-card:not(.is-modal) {
        width: 296px !important;
        max-width: 296px !important;
        padding: 16px 18px !important;
        border-radius: 16px !important;
    }

    .wb-tour-card:not(.is-modal) .wb-tour-title {
        font-size: 16px !important;
        margin-bottom: 6px !important;
        padding-right: 22px !important;
    }

    .wb-tour-card:not(.is-modal) .wb-tour-text {
        font-size: 13px !important;
        line-height: 1.48 !important;
        margin-bottom: 14px !important;
    }

    .wb-tour-card:not(.is-modal) .wb-tour-footer {
        padding-top: 12px !important;
    }

    .wb-tour-card:not(.is-modal) .wb-tour-btn {
        padding: 8px 13px !important;
        font-size: 12.5px !important;
    }
}

/* Ноутбуки 15–16" (1513px — 1728px):
   Чуть компактнее карточка, чтобы гарантированно помещаться справа от секции */
@media (min-width: 1513px) and (max-width: 1728px) {
    .wb-tour-card:not(.is-modal) {
        width: 340px !important;
        max-width: 340px !important;
        padding: 18px 20px !important;
    }
}

/* Компактность блока симулятора во время активного обучения на ноутбуках, планшетах и телефонах (<= 1728px):
   Позволяет одновременно уместить на экране Порог уверенности, Выбор товара, Вопрос покупателя
   и кнопку «Симулировать вопрос» в самом низу страницы без обрезания. */
@media (max-width: 1728px) {
    body.wb-tour-active #ar-confidence-setting-row {
        padding-top: 4px !important;
        padding-bottom: 12px !important;
        gap: 10px !important;
    }

    body.wb-tour-active #ar-confidence-setting-row .ar-setting-desc {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        margin-top: 2px !important;
    }

    body.wb-tour-active #ar-threshold-box {
        padding: 10px 14px !important;
    }

    body.wb-tour-active #sim-product-group,
    body.wb-tour-active #sim-question-group {
        margin-bottom: 12px !important;
    }

    body.wb-tour-active #sim-question {
        min-height: 58px !important;
        height: 58px !important;
        padding: 8px 12px !important;
    }

    body.wb-tour-active #sim-question-group .ar-chip-list {
        margin-top: 6px !important;
        gap: 6px !important;
    }

    body.wb-tour-active #sim-question-group .ar-chip-btn {
        min-height: 28px !important;
        padding: 4px 10px !important;
        font-size: 11.5px !important;
    }
}

/* Планшеты (768px — 1024px): компактная карточка туториала */
@media (min-width: 768px) and (max-width: 1024px) {
    .wb-tour-card:not(.is-modal) {
        width: min(420px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        padding: 16px 18px !important;
    }

    .wb-tour-card:not(.is-modal) .wb-tour-title {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }

    .wb-tour-card:not(.is-modal) .wb-tour-text {
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin-bottom: 12px !important;
    }
}

/* Мобильные телефоны (<= 767px):
   Максимально компактная обучающая карточка и плотная верстка симулятора,
   чтобы модалка обучения всегда помещалась над/под активным блоком и не перекрывала его */
@media (max-width: 767px) {
    .wb-tour-card:not(.is-modal) {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        padding: 12px 14px !important;
        border-radius: 14px !important;
    }

    .wb-tour-card:not(.is-modal) .wb-tour-close {
        top: 8px !important;
        right: 8px !important;
        width: 26px !important;
        height: 26px !important;
    }

    .wb-tour-card:not(.is-modal) .wb-tour-title {
        font-size: 14.5px !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
        padding-right: 24px !important;
    }

    .wb-tour-card:not(.is-modal) .wb-tour-text {
        font-size: 12px !important;
        line-height: 1.38 !important;
        margin-bottom: 10px !important;
    }

    .wb-tour-card:not(.is-modal) .wb-tour-footer {
        padding-top: 8px !important;
        gap: 6px !important;
    }

    .wb-tour-card:not(.is-modal) .wb-tour-btn {
        padding: 7px 11px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    .wb-tour-card:not(.is-modal) .wb-tour-dot {
        width: 5px !important;
        height: 5px !important;
    }

    .wb-tour-card:not(.is-modal) .wb-tour-dot.is-active {
        width: 14px !important;
    }

    body.wb-tour-active #tab-settings-sim .ar-section.ar-ai-only {
        padding: 12px !important;
    }

    body.wb-tour-active #ar-confidence-setting-row {
        padding-top: 0 !important;
        padding-bottom: 8px !important;
        gap: 6px !important;
    }

    body.wb-tour-active #ar-confidence-setting-row .ar-setting-title {
        font-size: 13.5px !important;
    }

    body.wb-tour-active #ar-confidence-setting-row .ar-setting-desc {
        font-size: 11.5px !important;
        line-height: 1.28 !important;
    }

    body.wb-tour-active #ar-threshold-box {
        padding: 8px 10px !important;
    }

    body.wb-tour-active #ar-threshold-box > div:last-child {
        display: none !important;
    }

    body.wb-tour-active #sim-product-group,
    body.wb-tour-active #sim-question-group {
        margin-bottom: 8px !important;
    }

    body.wb-tour-active #sim-product-group .ar-label,
    body.wb-tour-active #sim-question-group .ar-label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    body.wb-tour-active #sim-product-search {
        height: 36px !important;
        min-height: 36px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        font-size: 12.5px !important;
    }

    body.wb-tour-active #sim-question {
        min-height: 44px !important;
        height: 44px !important;
        padding: 6px 10px !important;
        font-size: 12.5px !important;
    }

    body.wb-tour-active #sim-question-group .ar-chip-list {
        margin-top: 4px !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
    }

    body.wb-tour-active #sim-question-group .ar-chip-btn {
        min-height: 24px !important;
        padding: 2px 8px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    body.wb-tour-active #sim-btn {
        min-height: 38px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}

/* --------------------------------------------------------------------------
   Недоступная (серая) кнопка «Вперед» в карточке тура,
   когда от пользователя требуется действие на странице
   -------------------------------------------------------------------------- */
#wbTourBtnNext:disabled,
#wbTourBtnNext.is-disabled,
.wb-tour-card .wb-tour-btn-primary:disabled,
.wb-tour-card .wb-tour-btn-primary.is-disabled {
    background: #e2e8f0 !important;
    background-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    border: 1px solid #cbd5e1 !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.85 !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s !important;
}

#wbTourBtnNext:disabled:hover,
#wbTourBtnNext.is-disabled:hover,
.wb-tour-card .wb-tour-btn-primary:disabled:hover,
.wb-tour-card .wb-tour-btn-primary.is-disabled:hover {
    background: #e2e8f0 !important;
    background-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    border: 1px solid #cbd5e1 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

#wbTourBtnNext:disabled:active,
#wbTourBtnNext.is-disabled:active,
.wb-tour-card .wb-tour-btn-primary:disabled:active,
.wb-tour-card .wb-tour-btn-primary.is-disabled:active {
    transform: none !important;
}