/* =========================================================
   NIVO — онлайн-чат, стили виджета (публичная часть)
   Все классы с префиксом .nvchat — конфликтов с сайтом нет
   ========================================================= */

.nvchat,
.nvchat *,
.nvchat *::before,
.nvchat *::after {
    box-sizing: border-box;
    color:#fff;
}

.nvchat {
    --nv-blue:      #3C8DBB;
    --nv-blue-dark: #2E7099;
    --nv-blue-soft: #6C8DB4;
    --nv-admin-bg:  #E4F1FA;
    --nv-admin-tx:  #1D4257;
    --nv-client-bg: #ECEEF1;
    --nv-client-tx: #363D45;
    --nv-sys:       #8B949E;
    --nv-cycle:     7.5s;      /* прыжок + волны ≈ 2,7 с, остальное — пауза */

    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9500;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #363D45;
}

/* ── ПЛАВАЮЩАЯ КНОПКА ───────────────────────────────────── */
.nvchat-launcher {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nv-blue) 0%, var(--nv-blue-soft) 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(60, 141, 187, .38), 0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s;
    -webkit-tap-highlight-color: transparent;
}
.nvchat-launcher:hover  { transform: scale(1.07); box-shadow: 0 12px 30px rgba(60, 141, 187, .45); }
.nvchat-launcher:active { transform: scale(.96); }
.nvchat-launcher svg { position: absolute; transition: opacity .22s, transform .22s; }
.nvchat-ico-close { opacity: 0; transform: rotate(-45deg) scale(.6); }

.nvchat[data-open="1"] .nvchat-ico-chat  { opacity: 0; transform: rotate(45deg) scale(.6); }
.nvchat[data-open="1"] .nvchat-ico-close { opacity: 1; transform: rotate(0) scale(1); }

/* Цикл привлечения внимания: прыжок → расходящиеся волны → пауза.
   Длительность паузы задаётся переменной --nv-cycle, прыжок и волны
   синхронизированы между собой. */
.nvchat[data-open="0"] .nvchat-launcher {
    animation: nvchat-jump var(--nv-cycle) linear infinite;
}
.nvchat[data-open="0"] .nvchat-launcher:hover { animation: none; }

@keyframes nvchat-jump {
    0%   { transform: translateY(0) scale(1, 1);          animation-timing-function: ease-in; }
    2%   { transform: translateY(2px) scale(1.06, .94);   animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
    5.5% { transform: translateY(-11px) scale(.96, 1.05); animation-timing-function: cubic-bezier(.6, 0, .85, .4); }
    8.5% { transform: translateY(0) scale(1.07, .93);     animation-timing-function: ease-out; }
    11%  { transform: translateY(0) scale(1, 1); }
    100% { transform: translateY(0) scale(1, 1); }
}

/* Волны — расходятся сразу после приземления кнопки */
.nvchat-launcher-pulse,
.nvchat-launcher::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 143%;
    height: 143%;
    border-radius: 50%;
    border: 2px solid var(--nv-blue);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    animation: nvchat-ring var(--nv-cycle) ease-out infinite;
}
.nvchat-launcher::after {
    width: 186%;
    height: 186%;
    border-width: 1.5px;
    animation-delay: .45s;
}
@keyframes nvchat-ring {
    0%, 9% { transform: translate(-50%, -50%) scale(.7);  opacity: 0; }
    12%    {                                              opacity: .55; }
    30%    { transform: translate(-50%, -50%) scale(1.06); opacity: 0; }
    100%   { transform: translate(-50%, -50%) scale(1.06); opacity: 0; }
}

.nvchat[data-open="1"] .nvchat-launcher-pulse,
.nvchat[data-open="1"] .nvchat-launcher::after { animation: none; }

/* Есть непрочитанный ответ — цикл повторяется чаще, волны акцентные */
.nvchat[data-unread="1"] { --nv-cycle: 4.2s; }
.nvchat[data-unread="1"] .nvchat-launcher-pulse,
.nvchat[data-unread="1"] .nvchat-launcher::after { border-color: #E74C3C; }

/* Счётчик непрочитанных */
.nvchat-badge {
    position: absolute;
    z-index: 2;                 /* поверх расходящихся волн */
    top: -3px;
    right: -3px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #E74C3C;
    border: 2px solid #fff;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    animation: nvchat-pop .3s cubic-bezier(.22, 1.4, .36, 1);
}
@keyframes nvchat-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ── ПОДСКАЗКА О НОВОМ ОТВЕТЕ ───────────────────────────── */
.nvchat-teaser {
    position: absolute;
    right: 4px;
    bottom: 76px;
    width: 252px;
    padding: 13px 30px 14px 15px;
    border-radius: 14px 14px 4px 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
    cursor: pointer;
    animation: nvchat-teaser-in .32s cubic-bezier(.22, 1, .36, 1);
}
@keyframes nvchat-teaser-in {
    from { opacity: 0; transform: translateY(12px) scale(.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nvchat-teaser-title { font-size: 12px; font-weight: 700; color: var(--nv-blue); margin-bottom: 3px; }
.nvchat-teaser-text  {
    font-size: 13px; color: #4A5560; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nvchat-teaser-close {
    position: absolute; top: 6px; right: 8px;
    width: 22px; height: 22px; padding: 0;
    border: none; background: none; color: #B6BEC6;
    font-size: 17px; line-height: 1; cursor: pointer; border-radius: 6px;
}
.nvchat-teaser-close:hover { background: #F2F4F6; color: #66707A; }

/* ── ОКНО ЧАТА ──────────────────────────────────────────── */
.nvchat-panel {
    position: absolute;
    right: 0;
    bottom: 76px;
    display: flex;
    flex-direction: column;
    width: 358px;
    height: 546px;
    max-height: calc(100vh - 130px);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(24, 44, 60, .22), 0 4px 12px rgba(0, 0, 0, .08);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.97);
    transform-origin: 100% 100%;
    transition: opacity .24s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility .24s;
}
.nvchat[data-open="1"] .nvchat-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Шапка */
.nvchat-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 14px 14px 16px;
    background: linear-gradient(135deg, var(--nv-blue) 0%, var(--nv-blue-soft) 100%);
    color: #fff;
    flex-shrink: 0;
}
.nvchat-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}
.nvchat-head-text { flex: 1; min-width: 0; }
.nvchat-title  { font-size: 14.5px; font-weight: 700; letter-spacing: .1px; color: #fff;}
.nvchat-status {
    font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, .82);
    display: flex; align-items: center; gap: 5px; margin-top: 2px;
}
.nvchat-status::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #F1C40F; flex-shrink: 0;
}
.nvchat-status.is-online::before { background: #4ADE80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
.nvchat-close {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; flex-shrink: 0;
    border: none; border-radius: 8px;
    background: rgba(255, 255, 255, .12); color: #fff;
    cursor: pointer; transition: background .2s;
}
.nvchat-close:hover { background: rgba(255, 255, 255, .26); }

/* Лента сообщений */
.nvchat-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 14px 6px;
    background: #F7F9FB;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.nvchat-body::-webkit-scrollbar { width: 6px; }
.nvchat-body::-webkit-scrollbar-thumb { background: #D3DBE2; border-radius: 3px; }
.nvchat-body::-webkit-scrollbar-thumb:hover { background: #B9C4CD; }

.nvchat-day {
    margin: 6px 0 14px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #A6AEB6;
}
.nvchat-day span {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    background: #EDF1F5;
    color:#000;
}

.nvchat-msg { margin-bottom: 10px; display: flex; flex-direction: column; }
.nvchat-msg-author {
    font-size: 10.5px; font-weight: 700; color: var(--nv-blue);
    margin: 0 0 3px 3px; letter-spacing: .2px;
}
.nvchat-bubble {
    position: relative;
    max-width: 84%;
    padding: 9px 13px 7px;
    border-radius: 15px;
    font-size: 13.5px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    animation: nvchat-msg-in .26s cubic-bezier(.22, 1, .36, 1);
}
@keyframes nvchat-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nvchat-bubble a { color: inherit; text-decoration: underline; }

/* Наши сообщения — голубоватые, слева */
.nvchat-msg--admin  { align-items: flex-start; }
.nvchat-msg--admin .nvchat-bubble {
    background: var(--nv-admin-bg);
    color: var(--nv-admin-tx);
    border-radius: 15px 15px 15px 5px;
}

/* Сообщения клиента — серые, справа */
.nvchat-msg--client { align-items: flex-end; }
.nvchat-msg--client .nvchat-bubble {
    background: var(--nv-client-bg);
    color: var(--nv-client-tx);
    border-radius: 15px 15px 5px 15px;
}

/* Информационные — серые, без окантовки, по центру */
.nvchat-msg--system { align-items: center; margin: 4px 0 14px; }
.nvchat-msg--system .nvchat-bubble {
    max-width: 100%;
    padding: 2px 8px;
    background: none;
    color: var(--nv-sys);
    font-size: 12.5px;
    line-height: 1.55;
    text-align: center;
    animation: none;
}
.nvchat-msg--system .nvchat-time { display: none; }
.nvchat-msg--system .nvchat-bubble a { color: var(--nv-blue); font-weight: 600; text-decoration: none; }
.nvchat-msg--system .nvchat-bubble a:hover { text-decoration: underline; }

.nvchat-time {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    text-align: right;
    opacity: .55;
    color: #808080;
}

/* Индикатор отправки */
.nvchat-msg--pending .nvchat-bubble { opacity: .6; }
.nvchat-msg--failed  .nvchat-bubble { background: #FDECEA; color: #B03A2E; }

/* Форма контактов внутри чата */
.nvchat-contacts[hidden] { display: none; }
.nvchat-contacts {
    margin: 4px 0 12px;
    padding: 16px 15px 15px;
    border: 1px solid #DCE6EE;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(60, 141, 187, .08);
    animation: nvchat-msg-in .3s cubic-bezier(.22, 1, .36, 1);
}
.nvchat-contacts-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #4A5560;
    line-height: 1.45;
    margin-bottom: 11px;
}
.nvchat-contacts input {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1.5px solid #E2E8EE;
    border-radius: 9px;
    background: #FAFCFD;
    font-family: inherit;
    font-size: 13.5px;
    color: #363D45;
    outline: none;
    transition: border-color .2s, background .2s;
}
.nvchat-contacts input:focus { border-color: var(--nv-blue); background: #fff; }
.nvchat-contacts input::placeholder { color: #AAB4BD; }
.nvchat-cf-error {
    margin: -2px 0 8px;
    font-size: 12px;
    color: #C0392B;
}
.nvchat-cf-submit {
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--nv-blue), var(--nv-blue-soft));
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s, transform .15s;
}
.nvchat-cf-submit:hover  { filter: brightness(1.07); }
.nvchat-cf-submit:active { transform: scale(.98); }
.nvchat-cf-submit:disabled { opacity: .6; cursor: default; }

/* Ошибка отправки */
.nvchat-error {
    padding: 9px 16px;
    background: #FDECEA;
    color: #B03A2E;
    font-size: 12.5px;
    line-height: 1.45;
    border-top: 1px solid #F7D9D5;
    flex-shrink: 0;
}

/* Поле ввода */
.nvchat-foot {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 11px 12px;
    background: #fff;
    border-top: 1px solid #EAEFF3;
    flex-shrink: 0;
}
.nvchat-input {
    flex: 1;
    max-height: 104px;
    padding: 10px 14px;
    border: 1.5px solid #E2E8EE;
    border-radius: 20px;
    background: #F7F9FB;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    color: #363D45;
    resize: none;
    outline: none;
    overflow-y: hidden;              /* пока поле растёт — полосы прокрутки нет */
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 141, 187, .3) transparent;
    transition: border-color .2s, background .2s;
}
/* Поле упёрлось в максимальную высоту — только тогда появляется полоса */
.nvchat-input--scroll { overflow-y: auto; }
.nvchat-input::-webkit-scrollbar { width: 4px; }
.nvchat-input::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.nvchat-input::-webkit-scrollbar-thumb {
    background: rgba(60, 141, 187, .25);
    border-radius: 4px;
}
.nvchat-input:hover::-webkit-scrollbar-thumb,
.nvchat-input:focus::-webkit-scrollbar-thumb { background: rgba(60, 141, 187, .45); }
.nvchat-input:focus { border-color: var(--nv-blue); background: #fff; }
.nvchat-input::placeholder { color: #AAB4BD; }
.nvchat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nvchat-send {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0; padding: 0;
    border: none; border-radius: 50%;
    background: linear-gradient(135deg, var(--nv-blue), var(--nv-blue-soft));
    color: #fff; cursor: pointer;
    transition: filter .2s, transform .15s, opacity .2s;
}
.nvchat-send:hover  { filter: brightness(1.08); }
.nvchat-send:active { transform: scale(.93); }
.nvchat-send:disabled { opacity: .45; cursor: default; transform: none; filter: none; }
.nvchat-send svg { margin: -1px 0 0 -2px; }

/* ── МОБИЛЬНАЯ ВЕРСИЯ ───────────────────────────────────── */
@media (max-width: 560px) {
    .nvchat { right: 16px; bottom: 16px; }
    .nvchat-launcher { width: 54px; height: 54px; }
    .nvchat-launcher::after { width: 168%; height: 168%; }
    .nvchat-launcher svg { transform-origin: center; }
    .nvchat-teaser { right: 0; bottom: 68px; width: min(252px, calc(100vw - 40px)); }

    .nvchat-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        transform: translateY(22px);
    }
    .nvchat[data-open="1"] .nvchat-panel { transform: translateY(0); }
    .nvchat-head {
        padding-top: calc(14px + env(safe-area-inset-top));
        padding-left: calc(16px + env(safe-area-inset-left));
        padding-right: calc(14px + env(safe-area-inset-right));
    }
    .nvchat-body { padding: 14px 13px 6px; }
    .nvchat-bubble { max-width: 88%; font-size: 14px; }
    .nvchat-foot { padding-bottom: calc(11px + env(safe-area-inset-bottom)); }
    .nvchat-input { font-size: 16px; }         /* iOS не зумит поле при фокусе */
    .nvchat-contacts input { font-size: 16px; }
    /* Кнопка прячется, когда окно открыто на весь экран */
    .nvchat[data-open="1"] .nvchat-launcher,
    .nvchat[data-open="1"] .nvchat-teaser { display: none; }
}

@media (max-height: 640px) and (min-width: 561px) {
    .nvchat-panel { height: calc(100vh - 120px); }
}

@media (prefers-reduced-motion: reduce) {
    .nvchat-launcher-pulse,
    .nvchat-launcher::after,
    .nvchat[data-open="0"] .nvchat-launcher { animation: none; }
    .nvchat-bubble, .nvchat-teaser, .nvchat-contacts { animation: none; }
    .nvchat-body { scroll-behavior: auto; }
}

@media print { .nvchat { display: none !important; } }