/* /assets/css/product-chat.css
 *
 * Панель чата «Задать вопрос по товару» на карточке товара.
 *
 * Почему отдельный файл: main.css — общий для всей витрины, и правка в нём
 * задела бы все страницы. Здесь всё замкнуто на префикс .pchat-.
 *
 * Панель — НЕ переход на другую страницу, а выезжающая шторка справа
 * (на мобильном — на весь экран). Поэтому разметка лежит рядом с кнопкой,
 * а показывается/скрывается классом .is-open, без перезагрузки.
 *
 * Цвета — из :root main.css (--ink, --acid, --coral, --paper, --white, --line).
 */

/* ─── Кнопка «Задать вопрос по товару» ──────────────────────────────────── */

.product-chat-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    margin-top: 10px;
    padding: 0 18px;
    border: 1px solid var(--ink, #181818);
    border-radius: 12px;
    background: transparent;
    color: var(--ink, #181818);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.product-chat-open:hover {
    background: var(--ink, #181818);
    color: var(--white, #fffefa);
}

.product-chat-open:active {
    background: #2f2f2f;
    border-color: #2f2f2f;
    color: var(--white, #fffefa);
}

.product-chat-open:focus-visible {
    outline: 2px solid var(--ink, #181818);
    outline-offset: 3px;
}

.product-chat-open svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
}

/* ─── Шторка ────────────────────────────────────────────────────────────── */

.pchat {
    position: fixed;
    inset: 0;
    /* 58 — между плавающим виджетом нейроконсультанта (consultant.css:
       55/56) и модалкой входа (views/auth.php: 60). Панель обязана быть выше
       кнопки консультанта: иначе его «лаунчер» в правом нижнем углу
       перехватывал клик по моей кнопке «Отправить» (проверено живьём:
       elementFromPoint отдавал consultant-launcher). И ниже модалки входа,
       потому что гость входит в аккаунт прямо из панели. При 90 (первая
       версия) подложка панели перехватывала клик по кнопке входа. */
    z-index: 58;
    display: flex;
    justify-content: flex-end;
    /* Пока панель закрыта — её нет ни для мыши, ни для скринридера. */
    visibility: hidden;
}

.pchat.is-open {
    visibility: visible;
}

.pchat__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(24, 24, 24, .38);
    opacity: 0;
    cursor: pointer;
    transition: opacity .22s ease;
}

.pchat.is-open .pchat__backdrop {
    opacity: 1;
}

.pchat__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(430px, 100%);
    height: 100%;
    max-height: 100dvh;
    background: var(--white, #fffefa);
    border-left: 1px solid var(--line, #dedbd3);
    box-shadow: -24px 0 60px rgba(24, 24, 24, .18);
    transform: translateX(102%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}

.pchat.is-open .pchat__panel {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .pchat__panel,
    .pchat__backdrop {
        transition: none;
    }
}

/* ─── Шапка панели: товар + закрыть ─────────────────────────────────────── */

.pchat__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--line, #dedbd3);
    background: var(--paper, #f6f4ef);
}

.pchat__thumb {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line, #dedbd3);
    border-radius: 10px;
    background: var(--white, #fffefa);
    object-fit: cover;
}

.pchat__head-text {
    min-width: 0;
    flex: 1 1 auto;
}

.pchat__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--muted, #706d66);
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pchat__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--ink, #181818);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pchat__store {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--muted, #706d66);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pchat__close {
    flex: 0 0 auto;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--line, #dedbd3);
    border-radius: 50%;
    background: var(--white, #fffefa);
    color: var(--ink, #181818);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.pchat__close:hover {
    border-color: var(--ink, #181818);
}

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

.pchat__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.pchat__day {
    margin: 14px 0 10px;
    color: var(--muted, #706d66);
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
}

.pchat__day:first-child {
    margin-top: 0;
}

.pchat-msg {
    display: flex;
    margin-bottom: 10px;
}

.pchat-msg.is-mine {
    justify-content: flex-end;
}

.pchat-bubble {
    max-width: 82%;
    padding: 9px 12px;
    border: 1px solid var(--line, #dedbd3);
    border-radius: 14px 14px 14px 4px;
    background: var(--paper, #f6f4ef);
    color: var(--ink, #181818);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.pchat-msg.is-mine .pchat-bubble {
    border-color: var(--ink, #181818);
    border-radius: 14px 14px 4px 14px;
    background: var(--ink, #181818);
    color: var(--white, #fffefa);
}

.pchat-bubble__author {
    display: block;
    margin-bottom: 3px;
    color: var(--muted, #706d66);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
}

.pchat-msg.is-mine .pchat-bubble__author {
    color: rgba(255, 254, 250, .62);
}

.pchat-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-family: 'DM Mono', monospace;
    font-size: 9.5px;
    opacity: .72;
}

.pchat-msg.is-mine .pchat-meta {
    justify-content: flex-end;
}

.pchat-meta__read {
    letter-spacing: .02em;
}

/* ─── Состояния: загрузка, пусто, ошибка ────────────────────────────────── */

.pchat-state {
    padding: 26px 8px;
    color: var(--muted, #706d66);
    font-size: 12.5px;
    line-height: 1.55;
    text-align: center;
}

.pchat-state__title {
    margin: 0 0 6px;
    color: var(--ink, #181818);
    font-size: 15px;
    font-weight: 800;
}

.pchat-state__text {
    margin: 0 0 14px;
}

.pchat-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.pchat-skeleton__bubble {
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(90deg, #efede7 25%, #f7f5f1 37%, #efede7 63%);
    background-size: 400% 100%;
    animation: pchat-shimmer 1.3s ease-in-out infinite;
}

.pchat-skeleton__bubble:nth-child(2) {
    width: 68%;
    align-self: flex-end;
}

.pchat-skeleton__bubble:nth-child(3) {
    width: 84%;
}

@keyframes pchat-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .pchat-skeleton__bubble {
        animation: none;
    }
}

/* ─── Гость: «Войдите, чтобы написать продавцу» ─────────────────────────── */

.pchat-guest {
    padding: 30px 20px;
    text-align: center;
}

.pchat-guest__icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    place-items: center;
    border-radius: 50%;
    background: var(--paper, #f6f4ef);
    font-size: 22px;
}

.pchat-guest__title {
    margin: 0 0 8px;
    color: var(--ink, #181818);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.pchat-guest__text {
    margin: 0 0 18px;
    color: var(--muted, #706d66);
    font-size: 12.5px;
    line-height: 1.55;
}

.pchat-guest__actions {
    display: grid;
    gap: 8px;
}

.pchat-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--ink, #181818);
    border-radius: 11px;
    background: var(--ink, #181818);
    color: var(--white, #fffefa);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}

.pchat-button:hover {
    background: #2f2f2f;
}

.pchat-button--ghost {
    background: transparent;
    color: var(--ink, #181818);
}

.pchat-button--ghost:hover {
    background: var(--paper, #f6f4ef);
    color: var(--ink, #181818);
}

.pchat-button:disabled {
    opacity: .55;
    cursor: default;
}

/* ─── Поле ввода ────────────────────────────────────────────────────────── */

.pchat__compose {
    flex: 0 0 auto;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line, #dedbd3);
    background: var(--white, #fffefa);
}

.pchat__hint {
    margin: 0 0 7px;
    color: var(--muted, #706d66);
    font-family: 'DM Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .03em;
}

.pchat__row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.pchat__input {
    flex: 1 1 auto;
    min-height: 42px;
    max-height: 128px;
    padding: 10px 12px;
    border: 1px solid var(--line, #dedbd3);
    border-radius: 12px;
    background: var(--paper, #f6f4ef);
    color: var(--ink, #181818);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
}

.pchat__input:focus {
    border-color: var(--ink, #181818);
    background: var(--white, #fffefa);
    outline: none;
}

.pchat__input::placeholder {
    color: #a09c94;
}

.pchat__send {
    flex: 0 0 auto;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--ink, #181818);
    border-radius: 12px;
    background: var(--ink, #181818);
    color: var(--white, #fffefa);
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}

.pchat__send:hover:not(:disabled) {
    background: #2f2f2f;
}

.pchat__send:disabled {
    opacity: .45;
    cursor: default;
}

.pchat__send svg {
    width: 18px;
    height: 18px;
}

.pchat__error {
    margin: 8px 0 0;
    color: #b3341f;
    font-size: 11.5px;
    line-height: 1.4;
}

/* ─── Мобильный: панель на весь экран ───────────────────────────────────── */

@media (max-width: 640px) {
    .pchat__panel {
        width: 100%;
        border-left: 0;
    }

    .pchat__head {
        padding: 13px 13px 12px;
    }

    .pchat__body {
        padding: 13px;
    }

    .pchat-bubble {
        max-width: 88%;
        font-size: 14px;
    }

    .pchat__compose {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .pchat__input {
        font-size: 16px; /* iOS не зумит страницу при фокусе */
    }

    .product-chat-open {
        min-height: 48px;
        font-size: 14px;
    }
}

/* Блокировка прокрутки страницы под открытой шторкой. */
body.pchat-locked {
    overflow: hidden;
}