/* ===================================
   ZAMOK — AI-ассистент: чат на сайте
   Кнопка-пузырь в углу и панель диалога. Пока виден не всем —
   разметка выводится только тем, кому чат открыт (AiChatAccess).

   У каждой переменной задано запасное значение: файл должен выглядеть
   одинаково всюду, куда его подключат, даже без variables.css.
   =================================== */

.ai-chat {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 450;
    font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* ---------- кнопка-пузырь ---------- */

.ai-chat__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary, #E11E28);
    color: var(--color-white, #FFFFFF);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(225, 30, 40, 0.35);
    transition: transform var(--transition-fast, 150ms ease), background var(--transition-fast, 150ms ease);
}

@media (hover: hover) and (pointer: fine) {
    .ai-chat__toggle:hover {
        background: var(--color-primary-hover, #C41920);
        transform: translateY(-2px);
    }
}

.ai-chat__toggle svg {
    width: 26px;
    height: 26px;
}

.ai-chat__toggle-close { display: none; }

.ai-chat.is-open .ai-chat__toggle-open { display: none; }
.ai-chat.is-open .ai-chat__toggle-close { display: block; }

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

.ai-chat__panel {
    position: absolute;
    right: 0;
    bottom: 72px;
    display: flex;
    flex-direction: column;
    width: 380px;
    height: min(620px, calc(100vh - 140px));
    background: var(--color-white, #FFFFFF);
    border-radius: var(--radius-xl, 16px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    container: ai-chat-panel / size;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    pointer-events: none;
    transition: opacity var(--transition-base, 250ms cubic-bezier(0.4, 0, 0.2, 1)), transform var(--transition-base, 250ms cubic-bezier(0.4, 0, 0.2, 1));
}

.ai-chat.is-open .ai-chat__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.ai-chat__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    padding: 14px 16px;
    background: var(--color-primary, #E11E28);
    color: var(--color-white, #FFFFFF);
}

.ai-chat__title {
    flex: 1;
    min-width: 0;
}

.ai-chat__title strong {
    display: block;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
}

.ai-chat__title span {
    display: block;
    font-size: var(--font-size-xs, 0.75rem);
    color: rgba(255, 255, 255, 0.85);
}

.ai-chat__header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}

.ai-chat__header-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-white, #FFFFFF);
}

.ai-chat__header-btn svg {
    width: 16px;
    height: 16px;
}

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

.ai-chat__feed {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
    background: var(--color-bg-secondary, #F9F9F9);
}

.ai-chat__msg {
    max-width: 86%;
    padding: 10px 13px;
    border-radius: var(--radius-lg, 12px);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Реплики покупателя — фирменным красным, как шапка: белый на #E11E28 даёт
   контраст 4,75:1, это проходит порог WCAG AA для обычного текста. */
.ai-chat__msg--user {
    align-self: flex-end;
    background: var(--color-primary, #E11E28);
    color: var(--color-white, #FFFFFF);
    border-bottom-right-radius: var(--radius-sm, 4px);
}

.ai-chat__msg--bot {
    align-self: flex-start;
    background: var(--color-white, #FFFFFF);
    color: var(--color-text, #000000);
    border: 1px solid var(--color-border, #E6E6E6);
    border-bottom-left-radius: var(--radius-sm, 4px);
}

.ai-chat__msg--note {
    align-self: center;
    max-width: 100%;
    background: var(--color-primary-light, #FEE2E2);
    border: none;
    color: var(--color-text-secondary, #4A4A4A);
    font-size: var(--font-size-xs, 0.75rem);
    text-align: center;
}

.ai-chat__msg a {
    color: var(--color-primary, #E11E28);
    text-decoration: underline;
}

.ai-chat__msg--user a { color: var(--color-white, #FFFFFF); }

.ai-chat__msg strong { font-weight: var(--font-weight-semibold, 600); }

/* ---------- карточки товаров ---------- */

.ai-chat__cards {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 86%;
}

.ai-chat__card {
    display: flex;
    gap: 10px;
    padding: 8px;
    background: var(--color-white, #FFFFFF);
    border: 1px solid var(--color-border, #E6E6E6);
    border-radius: var(--radius-lg, 12px);
    transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}

.ai-chat__card:hover {
    border-color: var(--color-gray-brand, #E6E6E6);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.06));
}

.ai-chat__card-media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-md, 8px);
}
.ai-chat__card [data-ai-product-link]:focus-visible {
    outline: 2px solid var(--color-primary, #ED131C);
    outline-offset: 2px;
}
.ai-chat__card-img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-secondary, #F9F9F9);
}

.ai-chat__card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-chat__card-name {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.35;
    color: var(--color-text, #000000);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-chat__card-name:hover { color: var(--color-primary, #E11E28); }

.ai-chat__card-sku {
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', 'Consolas', monospace);
    font-size: 11px;
    color: var(--color-text-muted, #9CA3AF);
}

.ai-chat__card-price {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text, #000000);
}

.ai-chat__card-price s {
    margin-left: 6px;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-regular, 400);
    color: var(--color-text-muted, #9CA3AF);
}

.ai-chat__card-stock {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--color-text-secondary, #4A4A4A);
}

.ai-chat__card-stock span::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-text-muted, #9CA3AF);
    vertical-align: middle;
}

.ai-chat__card-stock .is-in::before { background: var(--color-success, #16A34A); }

.ai-chat__card-cart {
    align-self: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md, 8px);
    background: var(--color-primary, #E11E28);
    color: var(--color-white, #FFFFFF);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease);
}

.ai-chat__card-cart:hover { background: var(--color-primary-hover, #C41920); }

.ai-chat__card-cart svg {
    width: 16px;
    height: 16px;
}

/* ---------- «печатает» ---------- */

.ai-chat__typing-dots { display: flex; align-items: center; gap: 4px; }

@media (prefers-reduced-motion: reduce) {
    .ai-chat__toggle:hover { transform: none; }
}

.ai-chat__typing {
    align-self: flex-start;
    align-items: center;
    display: none;
    gap: 4px;
    padding: 12px 14px;
    background: var(--color-white, #FFFFFF);
    border: 1px solid var(--color-border, #E6E6E6);
    border-radius: var(--radius-lg, 12px);
    border-bottom-left-radius: var(--radius-sm, 4px);
}

.ai-chat__typing.is-visible { display: flex; }

.ai-chat__typing i {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-text-muted, #9CA3AF);
    animation: ai-chat-typing 1.2s infinite ease-in-out;
}

.ai-chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.ai-chat__typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes ai-chat-typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- ввод ---------- */

.ai-chat__form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px;
    background: var(--color-white, #FFFFFF);
    border-top: 1px solid var(--color-border, #E6E6E6);
}

.ai-chat__input {
    flex: 1;
    min-width: 0;
    max-height: 120px;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #E6E6E6);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-secondary, #F9F9F9);
    font-family: inherit;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.4;
    color: var(--color-text, #000000);
    resize: none;
    transition: border-color var(--transition-fast, 150ms ease);
}

.ai-chat__input:focus {
    outline: none;
    border-color: var(--color-primary, #E11E28);
}

.ai-chat__send {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary, #E11E28);
    color: var(--color-white, #FFFFFF);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease);
}

.ai-chat__send:hover:not(:disabled) { background: var(--color-primary-hover, #C41920); }

.ai-chat__send:disabled {
    background: var(--color-gray-brand, #E6E6E6);
    color: var(--color-text-muted, #9CA3AF);
    cursor: default;
}

.ai-chat__send svg {
    width: 18px;
    height: 18px;
}

/* ---------- телефон: панель на весь экран ---------- */

@media (max-width: 560px), (pointer: coarse) and (max-height: 560px) {
    .ai-chat {
        right: 16px;
        bottom: 16px;
    }

    .ai-chat__panel {
        position: fixed;
        top: calc(var(--ai-viewport-top, 0px) + 8px);
        right: 0;
        left: 0;
        bottom: auto;
        width: 100%;
        /* Клавиатура уменьшает visual viewport, не обязательно layout viewport. */
        height: calc(var(--ai-viewport-height, 100vh) - 8px);
        height: calc(var(--ai-viewport-height, 100dvh) - 8px);
        border-radius: var(--radius-xl, 16px) var(--radius-xl, 16px) 0 0;
    }

    /* Развёрнутая панель закрывает собой пузырь — сворачиваем крестиком в шапке. */
    .ai-chat.is-open .ai-chat__toggle { display: none; }

    .ai-chat__cards { width: 100%; }

    .ai-chat__input { font-size: 16px; }
    .ai-chat__header-btn { width: 44px; height: 44px; }
    .ai-chat__form {
        flex-shrink: 0;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* В альбомном Safari клавиатура может оставить менее 150px. Сжимаем
   оформление по высоте самой панели, сохраняя ввод и кнопки 44px. */
@container ai-chat-panel (max-height: 240px) {
    .ai-chat__header { padding: 0 12px; min-height: 44px; }
    .ai-chat__title span { display: none; }
    .ai-chat__header-btn { width: 44px; height: 44px; }
    .ai-chat__feed { padding: 0 12px; }
    .ai-chat__form { flex-shrink: 0; padding: 0 8px; }
    .ai-chat__input { height: 44px; max-height: 44px; font-size: 16px; }
    .ai-chat__send { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-chat__panel,
    .ai-chat__toggle {
        transition: none;
    }

    .ai-chat__typing i { animation: none; }
}
.ai-chat__panel[hidden] { display: none; }
/* Оценки и добровольные подписки не меняют основной путь диалога. */
.ai-chat__msg--products{width:100%;max-width:100%}
.ai-chat__content{white-space:normal}
.ai-chat__text{white-space:pre-wrap;overflow-wrap:anywhere}
.ai-chat__content .ai-chat__card{margin:8px 0;white-space:normal}
.ai-chat__content .ai-chat__card[hidden]{display:none}
.ai-chat__more-products{display:block;margin:8px 0;padding:8px 12px;border:1px solid var(--color-border,#E6E6E6);border-radius:8px;background:#fff;color:var(--color-primary,#E11E28);font:inherit;font-size:13px;cursor:pointer}
.ai-chat__more-products:hover,.ai-chat__more-products:focus-visible{border-color:var(--color-primary,#E11E28);text-decoration:underline}
.ai-chat__card-detail{font-size:12px;line-height:1.45;margin-top:5px;white-space:pre-wrap}
.ai-chat__content .ai-chat__card:first-child{margin-top:0}
.ai-chat__content .ai-chat__card:last-child{margin-bottom:0}
.ai-chat__content .ai-chat__card-name{color:inherit;text-decoration:none;-webkit-line-clamp:unset}
.ai-chat__feedback{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;white-space:normal}
.ai-chat__feedback button{position:relative;font:inherit;font-size:12px;line-height:20px;color:#555;border:1px solid #aaa;background:#fff;padding:5px 10px;min-height:32px;border-radius:8px;cursor:pointer}
/* Внешне 32 px, сенсорная область 44 px. */
.ai-chat__feedback button::after{content:'';position:absolute;inset:-6px 0}
.ai-chat__feedback button:disabled{cursor:wait}
.ai-chat__feedback button[data-rating="1"][aria-pressed="true"]{color:#166534;border-color:#22a35b;background:#e9f8ed}
.ai-chat__feedback button[data-rating="-1"][aria-pressed="true"]{color:#a50b16;border-color:#df3848;background:#fff0f1}
.ai-chat__feedback [hidden]{display:none}
.ai-chat__correction{flex:1 0 100%;display:grid;gap:7px;margin-top:2px}
.ai-chat__correction label{display:grid;gap:5px;font-size:12px;line-height:1.35;color:#555}
.ai-chat__correction textarea{box-sizing:border-box;width:100%;min-height:72px;resize:vertical;border:1px solid #aaa;border-radius:8px;padding:8px 10px;background:#fff;color:#202124;font:inherit;font-size:13px;line-height:1.4}
.ai-chat__correction .ai-chat__correction-submit{justify-self:start}
.ai-chat__feedback-status{flex:1 0 100%;font-size:12px;color:#a50b16}
.ai-chat__feedback button:focus-visible,.ai-chat__correction textarea:focus-visible,.ai-chat__subscriptions:focus-visible,.ai-chat__stock-subscribe:focus-visible{outline:2px solid #e11e28;outline-offset:3px}
.ai-chat__subscriptions{display:flex;align-items:center;flex-shrink:0;padding:6px 16px;min-height:44px;background:#fff;color:#555;font-size:12px;text-decoration:underline}
.ai-chat__notices{flex-shrink:0;max-height:96px;overflow:auto;padding:8px 16px;background:#fff5e8;font-size:12px;line-height:1.4}
.ai-chat__notices[hidden]{display:none}
.ai-chat__notices a{display:block;color:#493316;margin-bottom:6px}
.ai-chat__stock-subscribe{display:block;color:#a50b16;font-size:12px;margin-top:8px;text-decoration:underline}
/* При малой высоте оставляем счётчик со ссылкой, сохраняя место диалогу. */
@container ai-chat-panel (max-height: 440px) {
    .ai-chat__notices { display: none; }
}
.ai-chat__unread{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;padding:0 5px;border:2px solid #fff;border-radius:12px;background:#202124;color:#fff;font:700 11px/18px Arial,sans-serif;text-align:center}
.ai-chat__unread[hidden]{display:none}


/* Фотография покупателя: превью выбора и приватное вложение в истории. */
.ai-chat__form { flex-wrap: wrap; }
.ai-chat__attach { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:40px; height:40px; border:1px solid var(--color-border,#E6E6E6); border-radius:50%; background:transparent; color:inherit; cursor:pointer; }
.ai-chat__attach svg { width:21px; height:21px; }
.ai-chat__attach:disabled { opacity:.45; cursor:default; }
.ai-chat__photo-preview { flex:0 0 100%; display:flex; align-items:center; gap:10px; font-size:12px; }
.ai-chat__photo-preview[hidden], .ai-chat__photo-error[hidden] { display:none; }
.ai-chat__photo-preview img { width:54px; height:54px; border-radius:8px; object-fit:cover; }
.ai-chat__photo-preview button { margin-left:auto; padding:8px; border:0; background:transparent; color:var(--color-primary,#E11E28); font:inherit; cursor:pointer; }
.ai-chat__photo-error { flex:0 0 100%; margin:0; color:var(--color-primary,#E11E28); font-size:12px; }
.ai-chat__photo { display:block; width:fit-content; max-width:100%; margin-bottom:8px; border-radius:10px; overflow:hidden; }
.ai-chat__photo img { display:block; max-width:100%; max-height:240px; width:auto; height:auto; }
@media (max-width:560px) { .ai-chat__attach { width:44px; height:44px; } }