/* ШІ-помічник «Дванадцятий» (inc/assistant.php, assets/js/assistant.js). Лише токени --tf-*.
   Телефон: шторка на весь екран і плитка-вхід над липкою панеллю покупки; від 64rem — панель 420 px праворуч,
   не модальна (сторінка під нею живе), вхід — та сама плитка «12» у правому нижньому куті (власник 2026-10-06, з 3.1.74;
   до того — кнопка в липкій смузі шапки; підпис «Помічник» поруч прибрано в 3.1.89 — власник 2026-10-27: «надпис
   "помічник" забери лиши просто 12 для кнопки чату»). */

/* ---------- знак: номер на спині ---------- */
.tf-assistant-mark { display: inline-grid; place-items: center; flex: none; inline-size: 2.5rem; block-size: 2.5rem; background: var(--tf-inverse); color: var(--tf-on-inverse); font-family: var(--tf-font-display); font-weight: var(--tf-weight-heading); font-size: 1.875rem; line-height: 1; letter-spacing: -0.01em; padding-block-start: 0.0625rem; }
.tf-assistant-mark--head { background: var(--tf-surface); color: var(--tf-inverse); }
.tf-assistant-mark--inline { inline-size: 1.375rem; block-size: 1.375rem; font-size: 1.0625rem; }

/* ---------- входи ---------- */
html:not(.tf-js) [data-tf-assistant-open] { display: none; } /* tf-native-exception: none — без JS чату немає, тож і входів */
.tf-assistant-entry { display: inline-flex; align-items: center; gap: var(--tf-space-2); min-block-size: var(--tf-target); padding: 0; border: 0; background: none; color: var(--tf-text); font: inherit; font-weight: 700; cursor: pointer; text-align: start; }
.tf-assistant-entry span:last-child { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1.5px; }
/* входи «підібрати м’яч»: секція «М’ячі» головної, рубрика м’ячів, гід м’яча */
.tf-balls__assistant, .tf-content-assistant { margin: var(--tf-space-3) 0 0; }
.tf-catalog__assistant { margin: 0; }
@media (min-width: 64rem) { .tf-variant-surfaces-number .tf-catalog__assistant { grid-column: 2; } } /* під лідом, як гіди добірки */
/* плитка «12»: над липкою панеллю покупки й «Оформити замовлення» кошика (підйом — як у смужки згоди) */
.tf-assistant-launch { position: fixed; inset-inline-end: var(--tf-space-4); inset-block-end: calc(var(--tf-space-4) + var(--tf-assistant-lift, 0px) + env(safe-area-inset-bottom, 0px)); z-index: calc(var(--tf-layer-sticky) + 1); inline-size: 3.25rem; block-size: 3.25rem; padding: 0; border: 0; background: var(--tf-inverse); color: var(--tf-on-inverse); box-shadow: 0 0 0 2px var(--tf-surface), var(--tf-shadow-overlay); cursor: pointer; display: grid; place-items: center; }
.tf-assistant-launch .tf-assistant-mark { inline-size: 100%; block-size: 100%; font-size: 2.375rem; }
.tf-assistant-launch::after { content: ""; position: absolute; inset-inline-end: 0.625rem; inset-block-end: -0.5625rem; border: 0.3125rem solid transparent; border-block-start-color: var(--tf-inverse); border-inline-end-color: var(--tf-inverse); }
.tf-assistant-launch__dot { position: absolute; inset-inline-start: -0.25rem; inset-block-start: -0.25rem; inline-size: 0.75rem; block-size: 0.75rem; background: var(--tf-accent); box-shadow: 0 0 0 2px var(--tf-surface); }
.tf-assistant-launch__dot[hidden] { display: none; } /* tf-native-exception: none — крапка лише коли є активна розмова */
html:not(.tf-js) .tf-assistant-launch, .tf-assistant-launch[aria-expanded="true"] { display: none; } /* tf-native-exception: none — вікно відкрите або без JS */
body:has(.tf-sticky-buy:not([hidden])) .tf-assistant-launch { --tf-assistant-lift: 4.5rem; }
@media (max-width: 782px) { body:has(.wc-block-cart__submit-container--sticky) .tf-assistant-launch { --tf-assistant-lift: 5.25rem; } }
body:has(#tf-analytics-consent:not([hidden])) .tf-assistant-launch, body:has(.tf-nav-disclosure[open]) .tf-assistant-launch { display: none; } /* tf-native-exception: none — не сперечається зі смужкою згоди й шторкою меню */
/* Кінець сторінки: плитка не накриває «На початок» і копірайт нижньої смуги футера. */
html.tf-js body:has(.tf-assistant-launch) .tf-footer-bottom { padding-block-end: calc(3.25rem + var(--tf-space-5)); }
@media (min-width: 64rem) {
	/* Десктоп: та сама плитка «12» без підпису (з 3.1.89), лише далі від країв; вікно відкривається панеллю праворуч, плитка ховається. */
	.tf-assistant-launch { inset-inline-end: var(--tf-space-6); inset-block-end: calc(var(--tf-space-6) + var(--tf-assistant-lift, 0px)); }
	html.tf-js body:has(.tf-assistant-launch) .tf-footer-bottom { padding-block-end: calc(3.25rem + var(--tf-space-6) + var(--tf-space-3)); }
}

/* ---------- вікно ---------- */
/* Телефон і планшет: вікно — видима область екрана (assets/js/assistant.js, fit): на iPhone екранна клавіатура зсуває
   видиму область, і вікно на весь екран їхало вгору разом із шапкою, а знизу просвічувала сторінка. */
.tf-assistant { position: fixed; inset: var(--tf-assistant-top, 0) 0 auto; block-size: var(--tf-assistant-height, 100%); z-index: var(--tf-layer-modal); display: flex; flex-direction: column; background: var(--tf-canvas); color: var(--tf-text); font-size: var(--tf-size-body); }
.tf-assistant[hidden] { display: none; } /* tf-native-exception: none — вікно закрите */
html.tf-assistant-open { overflow: hidden; }
@media (min-width: 64rem) {
	.tf-assistant { inset: 0 0 0 auto; block-size: auto; inline-size: min(26.25rem, 100%); border-inline-start: 1.5px solid var(--tf-text); box-shadow: var(--tf-shadow-overlay); }
	html.tf-assistant-open { overflow: auto; }
}
.tf-assistant__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0 var(--tf-space-3); min-block-size: var(--tf-header-h); padding: var(--tf-space-2) var(--tf-space-1) var(--tf-space-2) var(--tf-space-4); background: var(--tf-inverse); color: var(--tf-on-inverse); }
.tf-assistant__ident { min-inline-size: 0; }
.tf-assistant__name { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--tf-font-display); font-size: 1.6875rem; font-weight: var(--tf-weight-heading); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; }
.tf-assistant__role { margin: 0.25rem 0 0; font-family: var(--tf-font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tf-ls-mono); text-transform: uppercase; color: var(--tf-on-inverse-muted); }
.tf-assistant__head .tf-icon-button { color: var(--tf-on-inverse); border-color: transparent; background: transparent; }
.tf-assistant__head .tf-icon-button:hover { border-color: var(--tf-on-inverse-muted); }
.tf-assistant__head .tf-icon-button:focus-visible, .tf-assistant__name:focus-visible { outline-color: var(--tf-focus-on-inverse); }

.tf-assistant__selection { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-1) var(--tf-space-2); padding: var(--tf-space-2) var(--tf-space-4); border-block-end: 1px solid var(--tf-border); }
.tf-assistant__selection[hidden] { display: none; } /* tf-native-exception: none — підбір ще порожній */
.tf-assistant__selection-label { font-size: var(--tf-size-small); color: var(--tf-text-muted); }
.tf-assistant__chips { display: contents; }
/* умова підбору: вигляд 34 px, ціль дотику 44 px невидимим полем — як ♡ у картці */
.tf-assistant__slot { position: relative; display: inline-flex; align-items: center; gap: var(--tf-space-2); min-block-size: 2.125rem; padding: 0 var(--tf-space-2) 0 var(--tf-space-3); border: 0; border-radius: var(--tf-radius-s); background: var(--tf-text); color: var(--tf-on-inverse); font: inherit; font-size: var(--tf-size-small); font-weight: 700; cursor: pointer; }
.tf-assistant__slot::after { content: ""; position: absolute; inset: -0.3125rem 0; }
.tf-assistant__slot-x { font-size: 1rem; line-height: 1; opacity: 0.75; }

.tf-assistant__context { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--tf-space-3); align-items: center; padding: var(--tf-space-2) var(--tf-space-4); border-block-end: 1px solid var(--tf-border); }
.tf-assistant__context[hidden] { display: none; } /* tf-native-exception: none — не на сторінці товару */
.tf-assistant__context img { inline-size: 3rem; block-size: 3rem; object-fit: contain; background: var(--tf-surface-subtle); mix-blend-mode: multiply; }
.tf-assistant__context-label { font-family: var(--tf-font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tf-ls-mono); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-assistant__context-name { font-size: var(--tf-size-small); font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-assistant__context-meta { font-size: var(--tf-size-small); color: var(--tf-text-muted); }

.tf-assistant__log { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--tf-space-3); padding: var(--tf-space-4); scroll-padding-block-end: var(--tf-space-4); }
/* Елементи журналу не стискаються: у колонці з прокруткою елемент із власною мінімальною висотою (рядок добірки — 44 px)
   стискався до неї, і другий рядок тексту на телефоні вилазив на рамку. */
.tf-assistant__log > * { flex-shrink: 0; }
.tf-assistant__msg { max-inline-size: 88%; padding: 0.6875rem 0.875rem; line-height: 1.42; overflow-wrap: anywhere; }
.tf-assistant__msg--user { align-self: flex-end; background: var(--tf-text); color: var(--tf-on-inverse); }
.tf-assistant__msg--bot { align-self: flex-start; max-inline-size: 95%; background: var(--tf-surface-subtle); }
.tf-assistant__msg--note { align-self: stretch; max-inline-size: none; border: 1px solid var(--tf-text); background: var(--tf-surface); display: grid; gap: var(--tf-space-2); }
.tf-assistant__msg--note .tf-button { justify-self: start; }
.tf-assistant__who { display: flex; align-items: center; gap: var(--tf-space-2); margin: var(--tf-space-1) 0 calc(-1 * var(--tf-space-1)); font-family: var(--tf-font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tf-ls-mono); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-assistant__who .tf-assistant-mark { inline-size: 1.375rem; block-size: 1.375rem; font-size: 1.0625rem; }
.tf-assistant__typing { display: inline-flex; align-items: center; gap: var(--tf-space-2); color: var(--tf-text-muted); }
.tf-assistant__dots { display: inline-flex; gap: 0.25rem; }
.tf-assistant__dots i { inline-size: 0.375rem; block-size: 0.375rem; background: var(--tf-text); }
.tf-assistant__dots i:nth-child(2) { opacity: 0.55; }
.tf-assistant__dots i:nth-child(3) { opacity: 0.25; }
@media (prefers-reduced-motion: no-preference) {
	.tf-assistant__dots i { animation: tf-assistant-dot 1.2s infinite; }
	.tf-assistant__dots i:nth-child(2) { animation-delay: 0.2s; }
	.tf-assistant__dots i:nth-child(3) { animation-delay: 0.4s; }
	@keyframes tf-assistant-dot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
}

/* рядок добірки, сусідні добірки, сторінки */
.tf-assistant__result, .tf-assistant__row { display: flex; justify-content: space-between; align-items: center; gap: var(--tf-space-1) var(--tf-space-3); flex-wrap: wrap; min-block-size: var(--tf-target); padding: var(--tf-space-2) var(--tf-space-3); border: 1px solid var(--tf-text); color: var(--tf-text); font-family: var(--tf-font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tf-ls-mono); text-transform: uppercase; text-decoration: none; }
.tf-assistant__result:hover, .tf-assistant__row:hover { background: var(--tf-surface-subtle); }
.tf-assistant__result small, .tf-assistant__row small { font: inherit; color: var(--tf-text-muted); display: inline-flex; align-items: center; gap: var(--tf-space-2); }
.tf-assistant__row--expected small { color: var(--tf-warning); }
.tf-assistant__rows { display: grid; gap: var(--tf-space-2); }
.tf-assistant__more { display: inline-flex; align-items: center; gap: var(--tf-space-2); min-block-size: var(--tf-target); align-self: flex-start; color: var(--tf-brand); font-weight: 700; font-size: var(--tf-size-small); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1.5px; }
.tf-assistant__pages { display: flex; flex-wrap: wrap; gap: var(--tf-space-1) var(--tf-space-4); }
.tf-assistant__pages a { display: inline-flex; align-items: center; min-block-size: var(--tf-target); color: var(--tf-brand); font-weight: 700; font-size: var(--tf-size-small); text-decoration: underline; text-underline-offset: 0.25em; }

/* картки товарів: компактний рядок (власник 2026-10-06) — мініатюра, назва й ціна поруч, унизу розмір і «У кошик» */
.tf-assistant__cards { display: grid; border: 1px solid var(--tf-text); background: var(--tf-surface); }
.tf-assistant-card { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--tf-space-2) var(--tf-space-3); padding: var(--tf-space-3); }
.tf-assistant-card + .tf-assistant-card { border-block-start: 1px solid var(--tf-border); }
/* Біле тло мініатюри без змішування: картка з'являється анімацією, а Safari губить mix-blend-mode в анімованому шарі. */
.tf-assistant-card__media { display: grid; place-items: center; inline-size: 4.5rem; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--tf-border); background: var(--tf-surface); }
.tf-assistant-card__media img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.tf-assistant-card__body { display: grid; align-content: start; gap: 0.125rem; min-inline-size: 0; }
.tf-assistant-card__meta { margin: 0; overflow: hidden; font-family: var(--tf-font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tf-ls-mono); line-height: 1.3; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; color: var(--tf-text-muted); }
/* Назва товару — текстовим шрифтом без капсу, як у картці каталогу; два класи, бо h1–h3 «Номера на спині» — великими (:is(h1, h2, h3)). */
.tf-assistant-card .tf-assistant-card__name { margin: 0; font-family: var(--tf-font-body); font-size: var(--tf-size-small); font-weight: 700; letter-spacing: normal; line-height: 1.25; text-transform: none; }
.tf-assistant-card__name a { color: inherit; text-decoration: none; }
.tf-assistant-card__name a:hover { text-decoration: underline; }
.tf-assistant-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--tf-space-2); margin: 0; font-weight: 700; }
.tf-assistant-card__price .tf-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--tf-space-2); }
.tf-assistant-card__price del { order: 2; font-size: var(--tf-size-caption); font-weight: 400; color: var(--tf-text-muted); }
.tf-assistant-card__price ins { text-decoration: none; }
.tf-assistant-card__sale { padding: 0 0.3125rem; background: var(--tf-accent); color: var(--tf-on-accent); font-size: var(--tf-size-caption); line-height: 1.5; }
.tf-assistant-card__why { grid-column: 1 / -1; margin: 0; font-size: var(--tf-size-caption); line-height: 1.4; color: var(--tf-text-muted); }
.tf-assistant-card__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tf-space-2); }
.tf-assistant-card__stock { margin: 0; font-size: var(--tf-size-caption); font-weight: 700; }
.tf-assistant-card__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--tf-space-2); margin-inline-start: auto; }
/* Розмір уже вибрано в розмові: перемикач лише несе його у форму (quick-add каталогу), вибирати нічого. */
.tf-assistant-card__size { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tf-assistant-card__add, .tf-assistant-card__go { min-block-size: var(--tf-target); padding-inline: var(--tf-space-4); box-shadow: none; font-size: var(--tf-size-small); white-space: nowrap; }
.tf-assistant-card__go { margin-inline-start: auto; }
.tf-assistant-card__status { flex-basis: 100%; margin: 0; font-size: var(--tf-size-caption); text-align: end; }
.tf-assistant-card__status a { color: var(--tf-brand); font-weight: 700; }
.tf-assistant-card--out .tf-assistant-card__media img { opacity: 0.5; }

/* чипи швидких відповідей і стартові */
.tf-assistant__suggestions { display: flex; flex-wrap: wrap; gap: var(--tf-space-2); padding: 0 var(--tf-space-4) var(--tf-space-3); }
.tf-assistant__suggestions:empty { display: none; } /* tf-native-exception: none — чипів немає */
.tf-assistant__chip { display: inline-flex; align-items: center; gap: var(--tf-space-2); min-block-size: var(--tf-target); padding: 0 var(--tf-space-3); border: 1px solid var(--tf-control-border); border-radius: var(--tf-radius-s); background: var(--tf-surface); color: var(--tf-text); font: inherit; font-size: var(--tf-size-small); font-weight: 700; line-height: 1.2; text-align: start; cursor: pointer; }
.tf-assistant__chip:hover { background: var(--tf-surface-subtle); }
.tf-assistant__chip small { font-family: var(--tf-font-mono); font-size: 0.6875rem; font-weight: 700; color: var(--tf-text-muted); white-space: nowrap; }

/* таблиця розмірів, рівні, контакти */
.tf-assistant__table { border: 1px solid var(--tf-text); background: var(--tf-surface); font-size: var(--tf-size-small); }
.tf-assistant__table-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--tf-space-3); align-items: baseline; padding: var(--tf-space-2) var(--tf-space-3); border-block-end: 1px solid var(--tf-border); }
.tf-assistant__table-row--target { background: var(--tf-surface-subtle); }
.tf-assistant__table-row b { font-size: var(--tf-size-body); }
.tf-assistant__table-row .tf-assistant__label { font-family: var(--tf-font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tf-ls-mono); text-transform: uppercase; color: var(--tf-text-muted); }
.tf-assistant__table-row span:last-child { color: var(--tf-text-muted); }
.tf-assistant__ok { display: flex; align-items: center; gap: var(--tf-space-2); padding: var(--tf-space-2) var(--tf-space-3); border-block-end: 1px solid var(--tf-border); color: var(--tf-success); font-weight: 700; }
.tf-assistant__ok::before { content: ""; inline-size: 0.4375rem; block-size: 0.4375rem; background: currentColor; }
.tf-assistant__source { margin: 0; padding: var(--tf-space-2) var(--tf-space-3); font-family: var(--tf-font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: var(--tf-ls-mono); text-transform: uppercase; color: var(--tf-text-muted); line-height: 1.5; }
.tf-assistant__note { margin: 0; padding: var(--tf-space-2) var(--tf-space-3); font-size: var(--tf-size-small); color: var(--tf-text-muted); }
.tf-assistant__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); border: 1px solid var(--tf-text); background: var(--tf-surface); }
.tf-assistant__tier { padding: var(--tf-space-3); font-size: var(--tf-size-small); line-height: 1.38; display: grid; gap: var(--tf-space-2); align-content: start; }
.tf-assistant__tier + .tf-assistant__tier { border-inline-start: 1px solid var(--tf-border); }
.tf-assistant__tier-name { margin: 0; font-family: var(--tf-font-display); font-size: 1.625rem; font-weight: var(--tf-weight-heading); line-height: 0.9; text-transform: uppercase; }
.tf-assistant__tier-for { margin: 0; color: var(--tf-text-muted); }
.tf-assistant__tiers .tf-assistant__source { grid-column: 1 / -1; border-block-start: 1px solid var(--tf-border); }
.tf-assistant__contact { display: grid; gap: var(--tf-space-1); padding: var(--tf-space-3); border: 1px solid var(--tf-text); background: var(--tf-surface); }
.tf-assistant__contact-tel { display: inline-flex; align-items: center; gap: var(--tf-space-3); min-block-size: var(--tf-target); font-family: var(--tf-font-display); font-size: 2rem; font-weight: var(--tf-weight-heading); line-height: 1; letter-spacing: 0.01em; color: var(--tf-text); text-decoration: none; }
/* З Telegram-підтримкою: кнопка Telegram першою, телефон — дрібним рядком (власник 2026-10-26). */
.tf-assistant__contact-telegram { justify-self: start; }
.tf-assistant__contact-phone { justify-self: start; display: inline-flex; align-items: center; min-block-size: var(--tf-target); font-size: var(--tf-size-small); color: var(--tf-text); }
.tf-assistant__contact-note { margin: 0; font-size: var(--tf-size-small); color: var(--tf-text-muted); }
.tf-assistant__contact-note a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* оцінка ходу */
.tf-assistant__feedback { display: flex; gap: var(--tf-space-2); align-items: center; margin-block-start: calc(-1 * var(--tf-space-1)); font-size: var(--tf-size-caption); color: var(--tf-text-muted); }
.tf-assistant__feedback button { min-block-size: var(--tf-target); padding: 0 var(--tf-space-2); border: 0; background: none; color: var(--tf-text-muted); font: inherit; font-size: var(--tf-size-caption); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.tf-assistant__feedback button[aria-pressed="true"] { color: var(--tf-text); text-decoration: none; font-weight: 700; }

/* поле вводу */
.tf-assistant__composer { display: grid; grid-template-columns: minmax(0, 1fr) var(--tf-control); border-block-start: 1.5px solid var(--tf-text); padding: var(--tf-space-3) var(--tf-space-3) 0; background: var(--tf-surface); }
.tf-assistant__input { min-block-size: var(--tf-control); max-block-size: 8rem; padding: 0.75rem 0.875rem; border: 1.5px solid var(--tf-text); border-inline-end: 0; border-radius: var(--tf-radius-s) 0 0 var(--tf-radius-s); background: var(--tf-surface); color: var(--tf-text); font: inherit; font-size: 1rem; line-height: 1.4; resize: none; }
.tf-assistant__input:focus-visible { outline-offset: -3px; }
.tf-assistant__send { inline-size: var(--tf-control); block-size: var(--tf-control); display: grid; place-items: center; border: 0; border-radius: 0 var(--tf-radius-s) var(--tf-radius-s) 0; background: var(--tf-accent); color: var(--tf-on-accent); cursor: pointer; align-self: end; }
.tf-assistant__send:hover { background: var(--tf-accent-hover); }
.tf-assistant__send[disabled] { opacity: 0.5; cursor: default; }
.tf-assistant__fine { margin: 0; padding: var(--tf-space-2) var(--tf-space-3) calc(var(--tf-space-3) + env(safe-area-inset-bottom, 0px)); background: var(--tf-surface); font-size: var(--tf-size-caption); line-height: 1.4; color: var(--tf-text-muted); }
.tf-assistant__fine a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* чип з картинкою покриття (вбудований бот: «Де граєш?») */
.tf-assistant__chip--image { padding-inline-start: var(--tf-space-1); }
.tf-assistant__chip img { flex: none; inline-size: 2rem; block-size: 2rem; object-fit: cover; }

/* «Обрати 43 EU на сторінці» під таблицею розмірів на сторінці товару */
.tf-assistant__pick { margin: var(--tf-space-2) var(--tf-space-3) var(--tf-space-3); min-block-size: var(--tf-target); }
.tf-assistant__table .tf-assistant__ok + .tf-assistant__note { border-block-start: 0; }

/* «Порівняй ці пари»: таблиця на всю ширину; на вузькому екрані гортається вбік, підписи рядків — моно. */
.tf-assistant__compare { overflow-x: auto; border: 1px solid var(--tf-text); background: var(--tf-surface); }
.tf-assistant__compare table { inline-size: 100%; border-collapse: collapse; font-size: var(--tf-size-caption); line-height: 1.35; }
.tf-assistant__compare th, .tf-assistant__compare td { padding: var(--tf-space-2); border-block-end: 1px solid var(--tf-border); text-align: start; vertical-align: top; }
.tf-assistant__compare tbody tr:last-child th, .tf-assistant__compare tbody tr:last-child td { border-block-end: 0; }
.tf-assistant__compare thead th { font-family: var(--tf-font-body); font-weight: 700; letter-spacing: normal; text-transform: none; }
.tf-assistant__compare thead a { color: inherit; }
.tf-assistant__compare tbody th { font-family: var(--tf-font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--tf-ls-mono); text-transform: uppercase; white-space: nowrap; color: var(--tf-text-muted); }
.tf-assistant__compare tbody tr:last-child td { font-weight: 700; }

/* Ритм відповіді (assets/js/assistant.js, renderReply): блоки й картки з'являються по черзі; без анімацій у системі — одразу. */
@media (prefers-reduced-motion: no-preference) {
	.tf-assistant__enter,
	.tf-assistant__cards--enter .tf-assistant-card { animation: tf-assistant-in 240ms ease-out both; }
	.tf-assistant__cards--enter .tf-assistant-card:nth-child(2) { animation-delay: 140ms; }
	.tf-assistant__cards--enter .tf-assistant-card:nth-child(3) { animation-delay: 280ms; }
	.tf-assistant__cards--enter .tf-assistant-card:nth-child(n + 4) { animation-delay: 420ms; }
}
@keyframes tf-assistant-in {
	from { opacity: 0; transform: translateY(0.375rem); }
	to { opacity: 1; transform: none; }
}