/* Гайд-баблы: общий стиль для onboarding.js (карточки) и wf-guide.js (этикетки). Движок — guide-core.js */
.ob-bubble {
    position: fixed; display: none; z-index: 9999;
    width: 330px; padding: 13px 7px 6px;
    background: linear-gradient(180deg, #f6e3c6 0%, #e8cfa6 100%);
    border: 1px solid #9c6b34; border-radius: 8px;
    box-shadow: 0 5px 16px rgba(60,36,10,0.32);
    color: #3b2a13; font-size: 13px; line-height: 1.26;
    animation: obFloat 1.6s ease-in-out infinite;
    /* Шаг определяется условиями и может смениться от одной буквы — плавный переезд вместо телепорта */
    transition: top 0.2s ease, left 0.2s ease;
}
.ob-bubble.ob-narrow { width: 232px; }  /* подсказка на кнопку: встаёт под ней, а не сбоку от всего окна */
.ob-bubble.ob-fit { width: max-content; max-width: min(520px, 94vw); }  /* ширина по самой длинной строке */
.ob-bubble.ob-fit .ob-text { white-space: nowrap; }  /* переносов нет вообще — где ставим <br>, там и строка */
.ob-bubble .ob-text { margin-bottom: 4px; }
.ob-bubble .ob-dim { color: #7a5528; }
.ob-bubble .ob-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ob-bubble .ob-back, .ob-bubble .ob-next {
    background: linear-gradient(180deg,#c99553 0%,#a06f36 100%); border: 1px solid #6f4a20;
    border-radius: 5px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: #fff3e0; cursor: pointer;
}
.ob-bubble .ob-back:hover, .ob-bubble .ob-next:hover { filter: brightness(1.08); }
.ob-bubble .ob-back:disabled { opacity: 0.4; cursor: not-allowed; }
.ob-bubble .ob-counter { font-size: 11px; color: #7a5528; }
.ob-bubble .ob-close {
    position: absolute; top: 1px; right: 3px;
    background: none; border: none; padding: 1px 5px; cursor: pointer;
    font-size: 12px; color: #8a6038; line-height: 1;
}
.ob-bubble .ob-close:hover { color: #3b2a13; }
.ob-bubble .ob-tail { position: absolute; width: 0; height: 0; }
.ob-bubble .ob-tail-off { display: none; }  /* бабл ушёл в сторону или в угол — хвостику некуда указывать */
.ob-bubble .ob-tail-up   { top: -10px;    border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 10px solid #9c6b34; }
.ob-bubble .ob-tail-up::after { content:''; position:absolute; top:1px; left:-8px; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:9px solid #f6e3c6; }
.ob-bubble .ob-tail-down { bottom: -10px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 10px solid #9c6b34; }
.ob-bubble .ob-tail-down::after { content:''; position:absolute; bottom:1px; left:-8px; border-left:8px solid transparent; border-right:8px solid transparent; border-top:9px solid #e8cfa6; }
@keyframes obFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* Мок-кнопки внутри бабла — нерабочее превью для шагов где реальные кнопки скрыты */
.ob-bubble .ob-mock-row { display:flex; gap:4px; justify-content:center; margin:8px 0; flex-wrap:wrap; }
.ob-bubble .ob-mock-btn { padding:3px 8px; border-radius:6px; font-size:11px; font-weight:600; color:#fff; border:1px solid; text-shadow:0 1px 1px rgba(0,0,0,0.25); pointer-events:none; }
.ob-bubble .ob-mock-yellow { background:linear-gradient(180deg,#ffd54f,#ffc107); border-color:#b38705; color:#333; text-shadow:none; }
.ob-bubble .ob-mock-green  { background:linear-gradient(180deg,#34e85a,#15992f); border-color:#0f7a24; }
.ob-bubble .ob-mock-red    { background:linear-gradient(180deg,#ff6b6b,#b02a37); border-color:#8b1a25; }
/* Кнопки-действия внутри бабла (демо-коды) — сама кнопка носит btn-3d из base.html */
.ob-bubble .ob-extra:empty { display: none; }
.ob-bubble .ob-extra { margin-bottom: 5px; }
.ob-bubble .ob-act { width: auto; padding: 1px 8px; font-size: 11px; line-height: 1.5; }
/* Счётчик прогресса в тексте шага («Заполнено 4 из 30») */
.ob-bubble .ob-count { font-weight: 700; color: #8a5a2b; }
/* Гид (auto) листать нечем — ряд навигации скрыт, остаётся только крестик */
.ob-bubble .ob-actions[hidden] { display: none; }
/* Затенение страницы с вырезом вокруг цели шага. События не ловит — страница остаётся рабочей,
   поэтому затемнение и не мешает печатать в подсвеченную ячейку. Путь режется из JS (clip-path evenodd) */
#obShade {
    position: fixed; inset: 0; z-index: 9998; display: none; pointer-events: none;
    background: rgba(20, 20, 25, 0.45);
    transition: clip-path 0.25s ease;
}
/* btn-3d в «нажатом» состоянии — кнопка «🎓 Обучение» когда тур активен */
.btn-3d.pressed { filter: brightness(0.88); transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 2px 5px rgba(0,0,0,0.25); }
.btn-3d.pressed:hover { transform: translateY(1px); filter: brightness(0.95); }

/* Гостевой демо-прогон: плашка сверху и финальный CTA после скачивания */
.wf-guest-note, .wf-guest-done {
    border-radius: var(--ctr-radius);
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.45;
}

.wf-guest-note { background: #eef6ff; border: 1px solid #b6d4fe; color: #1c3d5a; }

.wf-guest-done {
    background: #e8f8ec;
    border: 1px solid #a3dcb4;
    color: #14532d;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Крупный номер на бабле гостевого прогона: пять подсказок висят разом, номер держит порядок.
   float — чтобы кружок жил внутри бабла и не обрезался у края экрана, текст обтекает его */
/* Строка шага: номер слева, текст справа. Именно flex, а не float — при ширине бабла по max-content
   float в интринсик-ширину не закладывается, и текст выезжал за правую границу */
.ob-bubble .ob-step { display: flex; align-items: flex-start; gap: 8px; }
.ob-bubble .ob-step-t { min-width: 0; }

.ob-bubble .ob-num {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(180deg, #8f5f2c, #5e3c18);
    border: 2px solid #d7b183;
    box-shadow: 0 2px 5px rgba(40,24,6,0.35);
    color: #ffeacd; font-size: 16px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}

.ob-bubble .ob-num-done {
    background: linear-gradient(180deg, #34e85a, #15992f);
    border-color: #0f7a24;
    color: #fff;
}

/* Стрелка к кнопке регистрации в шапке. Живёт под затемнением bootstrap-окна (1050),
   но над липкой шапкой: окно, всплывающее следом, должно её приглушить, а не соседствовать с ней. */
.reg-arrow {
    position: fixed; z-index: 1040; margin-left: -22px; pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)) drop-shadow(0 0 13px rgba(255,214,10,.6));
    animation: regArrowIn .35s cubic-bezier(.2,.9,.3,1.4) both,
               regArrowBob 1.1s ease-in-out .35s infinite;
}

@keyframes regArrowIn { from { opacity: 0; transform: translateY(20px) scale(.65); } }
@keyframes regArrowBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
    .reg-arrow { animation: regArrowIn .35s ease both; }
}