/*
 * Чат ІІ-консультанта.
 *
 * Стилі кнопки-запускача продубльовані інлайном у footer.php: цей файл
 * підвантажується відкладено (щоб не блокувати рендер), і без інлайну кнопка
 * встигла б блимнути нествореною.
 */

/* ── Спливаюча підказка біля кнопки ──
   Кнопку помічають не всі, а сама вона нічого не обіцяє. Репліка поруч
   пояснює, навіщо її натискати. Показуємо тричі за сесію й припиняємо
   назавжди, щойно людина закрила підказку або відкрила чат: нав'язливий
   помічник дратує сильніше, ніж непомічений. */
.ai-chat-teaser {
    position: fixed;
    /* Над кнопкою, а не збоку: збоку на вузьких екранах підказка налазила
       на саму кнопку, і виходила одна нерозбірлива пляма */
    right: 20px;
    bottom: 94px;
    z-index: 9998;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: min(270px, calc(100vw - 40px));
    padding: 12px 14px;
    background: #fff;
    border-radius: 14px 14px 4px 14px;
    box-shadow: 0 8px 26px rgba(12, 41, 106, .2);
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--pr-black, #1d1d1d);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px) scale(.96);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}

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

.ai-chat-teaser-close {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    align-self: flex-start;
    margin: -2px -4px 0 0;
    border: 0;
    border-radius: 50%;
    background: #eef0f6;
    color: #6f7690;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.ai-chat-teaser-close:hover {
    background: #dfe3ee;
}

@media (prefers-reduced-motion: reduce) {
    .ai-chat-teaser { transition: none; }
}

/* Підказка завжди рівно над кнопкою. Кнопка на телефоні піднята над нижньою
   навігацією (bottom:96px, висота 56px), тож підказка починається з 164px. */
@media (max-width: 991.98px) {
    .ai-chat-teaser {
        right: 14px;
        bottom: 164px;
        max-width: calc(100vw - 28px);
        font-size: 13px;
        z-index: 12002;
    }

}

.ai-chat-panel {
    position: fixed;
    right: 20px;
    bottom: 88px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(12, 41, 106, .22);
    overflow: hidden;
    /* Прихована панель не має бути в дереві доступності й у Tab-порядку */
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.ai-chat-panel.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* ── Шапка ── */
.ai-chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--pr-primary-dark, #0C296A);
    color: #fff;
}

.ai-chat-head b {
    display: block;
    font-size: 15px;
    line-height: 1.2;
}

.ai-chat-head span {
    font-size: 12px;
    opacity: .75;
}

.ai-chat-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.ai-chat-avatar svg {
    width: 21px;
    height: 21px;
    display: block;
}

.ai-chat-clear,
.ai-chat-close {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.ai-chat-clear {
    margin-left: auto;
    font-size: 14px;
}

.ai-chat-close { margin-left: 6px; }

.ai-chat-clear:hover,
.ai-chat-close:hover {
    background: rgba(255, 255, 255, .26);
}

/* ── Стрічка повідомлень ── */
.ai-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f6f7fb;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pr-black, #1d1d1d);
}

.ai-msg {
    max-width: 88%;
    margin-bottom: 10px;
    padding: 10px 13px;
    border-radius: 14px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.ai-msg a {
    color: var(--pr-links, #2b5192);
    text-decoration: underline;
}

.ai-msg-bot {
    background: #fff;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}

.ai-msg-user {
    margin-left: auto;
    background: var(--pr-primary, #4F5F99);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ai-msg-user a {
    color: #fff;
}

/* Три крапки, поки модель думає */
.ai-typing {
    display: inline-flex;
    gap: 4px;
    padding: 4px 0;
}

.ai-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b9bfd4;
    animation: ai-bounce 1.2s infinite;
}

.ai-typing i:nth-child(2) { animation-delay: .18s; }
.ai-typing i:nth-child(3) { animation-delay: .36s; }

@keyframes ai-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-chat-panel { transition: none; }
    .ai-typing i { animation: none; }
}

/* ── Картки товарів ── */
.ai-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 12px;
}

.ai-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e3e6f0;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}

.ai-card:hover {
    border-color: var(--pr-primary-light, #7488D4);
}

.ai-card-name {
    flex: 1;
    font-size: 13px;
    line-height: 1.35;
}

.ai-card-price {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.ai-card-stock {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: #6f7690;
}

.ai-card-stock.in {
    color: #2e7d32;
}

/* ── Підказки й кнопка менеджера ── */
.ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.ai-chip {
    padding: 7px 11px;
    background: #fff;
    border: 1px solid #d8dce9;
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--pr-primary-dark, #0C296A);
    cursor: pointer;
}

.ai-chip:hover {
    border-color: var(--pr-primary-light, #7488D4);
    background: #f0f3ff;
}

/* Знижка — єдина підказка, яку варто виділити: саме ціна найчастіше
   зупиняє перед покупкою, і питання про неї має кидатися в очі */
.ai-chip-promo {
    background: #f2fadf;
    border-color: #9ecb27;
    color: #3f5c00;
    font-weight: 600;
}

.ai-chip-promo:hover {
    background: #e8f5c9;
    border-color: #8bb61f;
}

.ai-handoff {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 11px;
    background: #fff5e6;
    border: 1px solid #f0c987;
    border-radius: 12px;
    color: #8a5a00;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.ai-handoff:hover {
    background: #ffeccc;
}

/* ── Поле вводу ── */
.ai-chat-foot {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border-top: 1px solid #e7e9f2;
}

.ai-chat-foot textarea {
    flex: 1;
    max-height: 96px;
    padding: 9px 12px;
    border: 1px solid #d8dce9;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    outline: none;
}

.ai-chat-foot textarea:focus {
    border-color: var(--pr-primary-light, #7488D4);
}

.ai-send {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--pr-primary-dark, #0C296A);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.ai-send:disabled {
    opacity: .45;
    cursor: default;
}

.ai-chat-note {
    padding: 0 14px 9px;
    background: #fff;
    font-size: 11px;
    color: #8b91a7;
    text-align: center;
}

/* ── Телефон: панель на весь екран ── */
@media (max-width: 575.98px) {
    .ai-chat-panel {
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
}

/* «Купити зараз» — синій, а не зелений: це не знижка, а дія.
   Показується тільки для моделі, що стоїть у залі. */
.ai-chip-now {
    background: var(--pr-primary-dark, #0C296A);
    border-color: var(--pr-primary-dark, #0C296A);
    color: #fff;
    font-weight: 600;
}

.ai-chip-now:hover {
    background: var(--pr-primary, #4F5F99);
    border-color: var(--pr-primary, #4F5F99);
}

/* ── Розмітка всередині відповіді ──
   Модель час від часу повертає жирний і списки, попри прохання писати просто.
   Показати їх як є (зірочками) — гірше, ніж оформити. */

.ai-msg-p + .ai-msg-p,
.ai-msg-list + .ai-msg-p,
.ai-msg-p + .ai-msg-list {
    margin-top: 7px;
}

.ai-msg strong {
    font-weight: 700;
}

.ai-msg-list {
    margin: 6px 0 0;
    padding-left: 18px;
}

.ai-msg-list li {
    margin-bottom: 4px;
}

.ai-msg-list li:last-child {
    margin-bottom: 0;
}

/* Марковані списки з компактним маркером — у вузькій панелі стандартний
   відступ з'їдає надто багато ширини */
.ai-msg ul.ai-msg-list {
    list-style: none;
    padding-left: 4px;
}

.ai-msg ul.ai-msg-list li::before {
    content: "•";
    margin-right: 7px;
    color: var(--pr-primary-light, #7488D4);
}