/* ============================================================================
   BB-CHAT-v1 — городской чат Body Bliss / бодиблисс.рф
   ----------------------------------------------------------------------------
   Всё заскоуплено под #bbChat, чтобы не задеть стили лендинга.
   Токены берём с сайта (--bb-sky и т.д.), но с фолбэками: виджет должен
   выглядеть прилично и на странице, где переменные не объявлены.

   Слои: колесо фортуны (#bbWheel) стоит на 2147483000 и обязано перекрывать
   чат целиком — поэтому пузырь и панель держим ниже.
   ========================================================================== */

#bbChat {
    --bbc-sky:   var(--bb-sky, #79B5D1);
    --bbc-deep:  var(--bb-teal-deep, #395A6A);
    --bbc-ink:   var(--bb-ink, #1F2A33);
    --bbc-muted: var(--bb-muted, #5A6470);
    --bbc-line:  var(--bb-line-2, #C2E4F2);
    --bbc-bg:    var(--bb-bg, #F4F9FB);

    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2147482000;
    font-family: Manrope, system-ui, -apple-system, sans-serif;
    color: var(--bbc-ink);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    transition: bottom .3s cubic-bezier(.25, 1, .5, 1);
}

/* Липкая полоса «Записаться» на мобиле занимает низ экрана — приподнимаемся */
#bbChat.bbc-lifted { bottom: 82px; }

#bbChat * { box-sizing: border-box; }

/* ── пузырь ──────────────────────────────────────────────────────────────── */

#bbChat .bbc-bubble {
    width: 58px;
    height: 58px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--bbc-line);
    background: #fff;
    box-shadow: var(--shadow-md, 0 15px 40px rgba(121, 181, 209, .12));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .3s cubic-bezier(.25, 1, .5, 1), box-shadow .3s ease;
    -webkit-tap-highlight-color: transparent;
}

#bbChat .bbc-bubble:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 20px 50px rgba(57, 90, 106, .15));
}

#bbChat .bbc-bubble:focus-visible {
    outline: 2px solid var(--bbc-deep);
    outline-offset: 3px;
}

#bbChat .bbc-bubble svg {
    width: 26px;
    height: 26px;
    stroke: var(--bbc-deep);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* непрочитанный ответ менеджера */
#bbChat .bbc-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bbc-sky);
    border: 2px solid #fff;
    display: none;
}

#bbChat .bbc-bubble-wrap { position: relative; }
#bbChat.bbc-unread .bbc-dot { display: block; }

/* ── намёк (ровно один за визит) ─────────────────────────────────────────── */

#bbChat .bbc-hint {
    display: none;
    align-items: flex-start;
    gap: 10px;
    max-width: 268px;
    padding: 12px 14px;
    border-radius: 18px 18px 6px 18px;
    background: #fff;
    border: 1px solid var(--bbc-line);
    box-shadow: var(--shadow-md, 0 15px 40px rgba(121, 181, 209, .12));
    font-size: 14px;
    line-height: 1.4;
    /* Только прозрачность, без подъёма: плашка появляется у самого края экрана,
       и лишнее движение по вертикали там читается как дёрганье. (На 390px сама
       страница даёт scrollWidth 391 — это её родовое, видно и на городах без
       чата, к виджету отношения не имеет.) */
    animation: bbc-fade .4s ease;
}

#bbChat.bbc-hinting .bbc-hint { display: flex; }

#bbChat .bbc-hint-x {
    flex: none;
    width: 22px;
    height: 22px;
    margin: -3px -4px 0 0;
    border: 0;
    background: none;
    color: var(--bbc-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

#bbChat .bbc-hint-x:hover { background: var(--bbc-bg); color: var(--bbc-ink); }

@keyframes bbc-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes bbc-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── панель ──────────────────────────────────────────────────────────────── */

#bbChat .bbc-panel {
    display: none;
    flex-direction: column;
    width: 364px;
    max-height: min(580px, calc(100vh - 140px));
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 20px 50px rgba(57, 90, 106, .15));
    animation: bbc-in .35s cubic-bezier(.25, 1, .5, 1);
}

#bbChat.bbc-open .bbc-panel { display: flex; }
#bbChat.bbc-open .bbc-hint  { display: none; }

#bbChat .bbc-head {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: var(--bbc-deep);
    color: #fff;
}

#bbChat .bbc-head-t {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 3px;
}

#bbChat .bbc-head-s {
    font-size: 12px;
    line-height: 1.35;
    opacity: .78;
    margin: 0;
}

#bbChat .bbc-x {
    margin-left: auto;
    flex: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

#bbChat .bbc-x:hover { background: rgba(255, 255, 255, .26); }

/* ── лента сообщений ─────────────────────────────────────────────────────── */

#bbChat .bbc-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    background: var(--bbc-bg);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
}

#bbChat .bbc-msg {
    max-width: 86%;
    padding: 10px 13px;
    font-size: 14.5px;
    line-height: 1.45;
    border-radius: 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

#bbChat .bbc-msg-me {
    align-self: flex-end;
    background: var(--bbc-sky);
    color: #fff;
    border-bottom-right-radius: 5px;
}

#bbChat .bbc-msg-op {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--bbc-line);
    border-bottom-left-radius: 5px;
}

#bbChat .bbc-msg-sys {
    align-self: center;
    max-width: 100%;
    background: none;
    color: var(--bbc-muted);
    font-size: 12.5px;
    line-height: 1.45;
    text-align: center;
    padding: 2px 6px;
}

/* ── подвал: ввод / телефон ──────────────────────────────────────────────── */

#bbChat .bbc-foot {
    flex: none;
    padding: 12px 14px 14px;
    background: #fff;
    border-top: 1px solid var(--bbc-line);
}

#bbChat .bbc-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

#bbChat .bbc-input,
#bbChat .bbc-phone {
    flex: 1 1 auto;
    width: 100%;
    min-height: 44px;
    max-height: 108px;
    padding: 11px 14px;
    border: 1px solid var(--bbc-line);
    border-radius: 14px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    line-height: 1.35;
    color: var(--bbc-ink);
    resize: none;
    outline: none;
}

#bbChat .bbc-input:focus,
#bbChat .bbc-phone:focus { border-color: var(--bbc-sky); }

#bbChat .bbc-invalid,
#bbChat .bbc-invalid:focus { border-color: #D9534F; }

#bbChat .bbc-send {
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: var(--bbc-sky);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease;
}

#bbChat .bbc-send:hover:not(:disabled) { background: var(--bbc-deep); }
#bbChat .bbc-send:disabled { opacity: .45; cursor: default; }
#bbChat .bbc-send svg { width: 19px; height: 19px; fill: currentColor; }

#bbChat .bbc-btn {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 14px;
    background: var(--bbc-sky);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .25s ease;
}

#bbChat .bbc-btn:hover:not(:disabled) { background: var(--bbc-deep); }
#bbChat .bbc-btn:disabled { opacity: .5; cursor: default; }

#bbChat .bbc-note {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--bbc-muted);
}

#bbChat .bbc-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--bbc-muted);
    cursor: pointer;
}

#bbChat .bbc-consent input {
    flex: none;
    width: 15px;
    height: 15px;
    margin: 1px 0 0;
    accent-color: var(--bbc-sky);
}

#bbChat .bbc-consent a { color: var(--bbc-deep); }
#bbChat .bbc-consent.bbc-invalid { color: #D9534F; }

/* запасные каналы — показываем, когда менеджер молчит */
#bbChat .bbc-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

#bbChat .bbc-alt a {
    flex: 1 1 auto;
    text-align: center;
    padding: 8px 10px;
    border: 1px solid var(--bbc-line);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbc-deep);
    text-decoration: none;
    background: #fff;
    transition: background .25s ease;
}

#bbChat .bbc-alt a:hover { background: var(--bbc-bg); }

#bbChat .bbc-err {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #D9534F;
}

/* honeypot */
#bbChat .bbc-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ── мобильная раскладка ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
    #bbChat {
        right: 14px;
        bottom: 16px;
        left: 14px;
        align-items: flex-end;
    }

    #bbChat.bbc-lifted { bottom: 78px; }

    #bbChat .bbc-hint { max-width: min(300px, calc(100vw - 40px)); }

    /* открытый чат перекрывает липкую кнопку — так и надо, он сейчас главный */
    #bbChat.bbc-open {
        left: 0;
        right: 0;
        bottom: 0;
    }

    #bbChat.bbc-open .bbc-bubble-wrap { display: none; }

    #bbChat .bbc-panel {
        width: 100%;
        max-height: 86vh;
        max-height: 86dvh;
        border-radius: 22px 22px 0 0;
    }

    #bbChat .bbc-body { padding: 14px; }

    /* iOS зумит поле с font-size < 16px */
    #bbChat .bbc-input,
    #bbChat .bbc-phone { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    #bbChat,
    #bbChat .bbc-hint,
    #bbChat .bbc-panel,
    #bbChat .bbc-bubble { animation: none; transition: none; }
}


/* ============================================================================
   BB-CHAT-DOCK-20260818 — панель в широком блоке страницы (.bbstage)
   ----------------------------------------------------------------------------
   Доскроллив до блока «Онлайн-чат», посетитель видит ТУ ЖЕ панель: скрипт
   физически переносит #bbChat в #bbChatStage и вешает .bbc-docked. Поэтому
   здесь только геометрия — лента, ввод и все обработчики те же самые.
   Ширина ленты ограничена колонкой 900px: на 1100px строки читаются тяжело.
   ========================================================================== */

#bbChat.bbc-docked {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    align-items: stretch;
    gap: 0;
    bottom: auto;
    right: auto;
    z-index: auto;
}

/* В блоке чат и так развёрнут: пузырь, намёк и крестик закрытия не нужны. */
#bbChat.bbc-docked .bbc-bubble-wrap,
#bbChat.bbc-docked .bbc-hint,
#bbChat.bbc-docked .bbc-x { display: none; }

/* height:100% тут не работает — у дока задан только min-height, процент не от
   чего считать. Тянемся флексом. */
#bbChat.bbc-docked .bbc-panel {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    animation: none;
}

/* Шапка выровнена по центру блока: в углу она читалась слева из-за крестика,
   а в широком доке крестика нет и текст, сдвинутый к колонке 900px, висел
   непонятно где (замечание владельца). Центр держит её заодно с лентой. */
#bbChat.bbc-docked .bbc-head { padding: 18px 28px; justify-content: center; text-align: center; }
#bbChat.bbc-docked .bbc-head-t { font-size: 21px; }
#bbChat.bbc-docked .bbc-head-s { font-size: 13px; }

#bbChat.bbc-docked .bbc-body { padding: 26px max(18px, calc((100% - 900px) / 2)); gap: 12px; }
#bbChat.bbc-docked .bbc-msg { max-width: min(74%, 620px); font-size: 15.5px; }
#bbChat.bbc-docked .bbc-msg-sys { max-width: 620px; }

#bbChat.bbc-docked .bbc-foot { padding: 16px max(18px, calc((100% - 900px) / 2)) 20px; }
#bbChat.bbc-docked .bbc-input { min-height: 52px; max-height: 140px; font-size: 16px; }
#bbChat.bbc-docked .bbc-send { width: 52px; height: 52px; }
#bbChat.bbc-docked .bbc-phone { min-height: 52px; font-size: 16px; }

@media (max-width: 640px) {
    #bbChat.bbc-docked .bbc-head { padding: 15px 16px; }
    #bbChat.bbc-docked .bbc-head-t { font-size: 18px; }
    #bbChat.bbc-docked .bbc-body { padding: 16px; }
    #bbChat.bbc-docked .bbc-msg { max-width: 86%; font-size: 14.5px; }
    #bbChat.bbc-docked .bbc-foot { padding: 12px 14px 14px; }
}


/* ── быстрые вопросы (BB-CHAT-QUICK-20260818) ────────────────────────────── */

/* Вправо, к той же стороне, где стоят сообщения клиента: чип — это его
   реплика, а не подсказка системы (правка по замечанию владельца). */
#bbChat .bbc-quick {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin-top: 2px;
}

#bbChat .bbc-quick-t {
    width: 100%;
    margin: 0 0 2px;
    text-align: right;
    font-size: 12.5px;
    color: var(--bbc-muted);
}

#bbChat .bbc-chip {
    padding: 9px 15px;
    border: 1px solid var(--bbc-line);
    border-radius: 999px;
    background: #fff;
    color: var(--bbc-deep);
    font: inherit;
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

#bbChat .bbc-chip:hover {
    background: var(--bbc-bg);
    border-color: var(--bbc-sky);
    transform: translateY(-1px);
}

#bbChat .bbc-chip:focus-visible { outline: 2px solid var(--bbc-deep); outline-offset: 2px; }

/* В широком блоке места больше — вопросы читаются крупнее и стоят в строку */
#bbChat.bbc-docked .bbc-quick { margin-top: 8px; }
#bbChat.bbc-docked .bbc-chip { max-width: min(74%, 620px); }
#bbChat.bbc-docked .bbc-chip { font-size: 15px; padding: 11px 18px; }

@media (max-width: 640px) {
    #bbChat.bbc-docked .bbc-chip { font-size: 14px; padding: 9px 15px; }
}