/* ===== ІІ-асистент: плаваюче запрошення + панель чату =====
   Кольори беремо з токенів сайту (--surface/--text/--line/--accent), тому темна
   тема працює без окремих правил: [data-theme="dark"] перевизначає самі токени.
   Позиція узгоджена з .contact-fab (right:18px; bottom:18px; 60px) — панель і
   запрошення ростуть ВГОРУ від неї, щоб нічого не накладалося.                 */

.dg-ai {
    position: fixed; right: 18px; bottom: 90px; z-index: 950;
    font-family: var(--font-body);
    /* Сам контейнер для миші ПРОЗОРИЙ. Це не косметика: він висить рівно над
       верхніми кнопками веєра .contact-fab, і навіть із невидимим запрошенням
       усередині його власна коробка перехоплювала курсор — веєр вважав, що
       мишу відвели геть, і згортався на півдорозі до «бота» чи Viber.
       Події вмикаємо точково — лише тим елементам, з якими справді працюють. */
    pointer-events: none;
}

/* ---- запрошення ("чим допомогти?") ---- */
.dg-ai__invite {
    position: relative;
    width: 268px; padding: 16px 18px 14px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
}
.dg-ai__invite.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dg-ai__invite-text { font-size: 15px; line-height: 1.4; font-weight: 600; margin-bottom: 12px; padding-right: 14px; }
.dg-ai__invite-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dg-ai__invite-yes {
    background: var(--accent); color: var(--ink); border: 0;
    padding: 9px 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.dg-ai__invite-yes:hover { background: var(--accent-dark); }
.dg-ai__invite-no {
    background: none; border: 0; color: var(--text-light);
    padding: 9px 4px; font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline;
}
.dg-ai__invite-x {
    position: absolute; top: 6px; right: 6px;
    width: 26px; height: 26px; border: 0; background: none; cursor: pointer;
    color: var(--text-light); font-size: 18px; line-height: 1;
}
/* «Хвостик» до кнопки звʼязку, щоб запрошення читалось як її репліка. */
.dg-ai__invite::after {
    content: ""; position: absolute; right: 20px; bottom: -9px;
    width: 16px; height: 16px; background: var(--surface);
    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    transform: rotate(45deg);
}

/* Поки розкрите віяло контактів — запрошення прибираємо.
   Воно висить рівно над верхніми кнопками веєра («бот», Viber) і, на відміну
   від самого контейнера .dg-ai, кліки перехоплює за призначенням — тобто
   закривало б собою ті кнопки. Селектор працює через сусідній комбінатор:
   у layout <x-contact-fab /> іде ПЕРЕД <x-ai-assistant />. */
#contact-fab.is-open ~ .dg-ai .dg-ai__invite {
    opacity: 0; pointer-events: none;
}

/* ---- панель чату ---- */
.dg-ai__panel {
    display: none; flex-direction: column;
    width: 380px; height: 560px; max-height: calc(100vh - 140px);
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .24);
}
.dg-ai.is-open .dg-ai__panel { display: flex; pointer-events: auto; }
.dg-ai.is-open .dg-ai__invite { display: none; }

.dg-ai__head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; background: var(--ink); color: #F3ECDC;
}
.dg-ai__head-title { font-weight: 700; font-size: 15px; line-height: 1.2; }
.dg-ai__head-sub { font-size: 12px; opacity: .72; margin-top: 2px; }
.dg-ai__head-x {
    margin-left: auto; border: 0; background: none; color: inherit;
    width: 32px; height: 32px; cursor: pointer; font-size: 20px; line-height: 1;
}
.dg-ai__dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--success);
    flex: none; box-shadow: 0 0 0 3px rgba(33, 164, 6, .22);
}

.dg-ai__log {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--bg-soft);
    /* overflow-anchor вимкнено: браузер інакше «тримає» позицію при дописуванні
       і остання репліка лишається за межами видимої області. */
    overflow-anchor: none;
}
.dg-ai__msg {
    max-width: 86%; padding: 10px 13px; font-size: 14px; line-height: 1.5;
    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
.dg-ai__msg--bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.dg-ai__msg--user { align-self: flex-end; background: var(--accent); color: var(--ink); font-weight: 500; }
.dg-ai__msg--manager { align-self: flex-start; background: var(--notice-bg); border: 1px solid var(--line-dark); color: var(--text); }
.dg-ai__msg--error { align-self: center; background: none; border: 0; color: var(--error); font-size: 13px; text-align: center; }
.dg-ai__msg-who { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .65; margin-bottom: 4px; }
.dg-ai__msg a { color: var(--link); }

/* Пояснення довгого очікування — над крапками, дрібним і без рамки:
   це службова репліка інтерфейсу, а не повідомлення асистента. */
.dg-ai__wait {
    align-self: flex-start; max-width: 86%;
    font-size: 12px; line-height: 1.4; color: var(--text-light);
    padding: 0 2px;
}

/* три крапки «друкує» */
.dg-ai__typing { align-self: flex-start; display: none; gap: 4px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); }
.dg-ai__typing.is-shown { display: flex; }
.dg-ai__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-light); animation: dg-ai-blink 1.2s infinite; }
.dg-ai__typing i:nth-child(2) { animation-delay: .2s; }
.dg-ai__typing i:nth-child(3) { animation-delay: .4s; }
@keyframes dg-ai-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.dg-ai__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }
.dg-ai__input {
    flex: 1; resize: none; min-height: 42px; max-height: 120px;
    padding: 11px 12px; font: inherit; font-size: 14px;
    color: var(--text); background: var(--bg); border: 1px solid var(--line-form);
}
.dg-ai__input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.dg-ai__send {
    flex: none; width: 44px; border: 0; background: var(--accent); color: var(--ink);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dg-ai__send:disabled { opacity: .45; cursor: default; }
.dg-ai__send svg { width: 20px; height: 20px; }

.dg-ai__foot { padding: 0 12px 10px; font-size: 11px; line-height: 1.35; color: var(--text-light); background: var(--surface); text-align: center; }

/* ---- мобільний ----
   Точка зламу 640px — та сама, на якій .contact-fab переїжджає ЛІВОРУЧ
   (style.css). Отже й запрошення має бути ліве, інакше його «хвостик» вказував
   би в порожній кут. Панель розкриваємо на весь екран: 380px тут не поміщаються. */
@media (max-width: 640px) {
    .dg-ai { right: 12px; left: 12px; bottom: 78px; }
    .dg-ai__invite { width: auto; max-width: 320px; margin-right: auto; }
    .dg-ai__invite::after { right: auto; left: 20px; }
    .dg-ai.is-open { right: 0; left: 0; bottom: 0; top: 0; }
    .dg-ai.is-open .dg-ai__panel { width: 100%; height: 100%; max-height: none; border: 0; }
}

/* Коли відкрито кошик — ховаємо разом з .contact-fab (те саме правило вище в style.css). */
body.cart-open .dg-ai { display: none; }