/* VISUAL-FIX 28.09.2026: лише вигляд (без логіки), знайдено за кадрами docs/threads-review-2026-09-28/visual/.
 * Підключається тільки при wp option amg_comm_visual_fix = 1. Вимкнути: wp option update amg_comm_visual_fix 0.
 * Усі правила під body.amg-comm-standalone. */

/* VF1. Профіль улюбленця на телефоні ширший за екран на 24px (margin -12px при нульовому padding батька):
 * сторінка їде вбік, iOS зменшує масштаб, нижнє меню ріжеться знизу. */
@media (max-width:767px){
	body.amg-comm-standalone .amg-comm .amg-comm-pet-profile{margin:0 0 16px}
}

/* VF2. Нижнє меню: чотири пункти різної ширини + порожній spacer під space-around → нерівні проміжки між іконками. */
body.amg-comm-standalone .amg-comm .amg-comm-bottomnav{justify-content:stretch}
body.amg-comm-standalone .amg-comm .amg-comm-bottomnav > .amg-comm-bn-item{flex:1 1 0;min-width:0}
body.amg-comm-standalone .amg-comm .amg-comm-bottomnav > .amg-comm-bn-spacer{flex:0 0 0;width:0;margin:0;padding:0}

/* VF3. ПК: «Створити публікацію» у лівій панелі переноситься на два рядки й центрується, інші пункти в один рядок зліва. */
@media (min-width:1024px){
	body.amg-comm-standalone .amg-comm .amg-comm-ln-compose{padding-left:14px;padding-right:14px;white-space:nowrap;text-align:left;font-size:14px}
	/* D-18: рівні поля 14/14; текст 14px (158 → 148 px) влазить у 220 px і стартує на тій самій лінії, що й інші пункти */
	body.amg-comm-standalone .amg-comm .amg-comm-ln-compose .amg-comm-ln-label{white-space:nowrap}
}

/* VF4. Лайтбокс: підказка «Свайпніть вниз щоб закрити» ламалась на два рядки. */
body.amg-comm-standalone #amg-comm-lightbox .amg-comm-lb-hint{white-space:nowrap;max-width:calc(100vw - 32px)}

/* VF5. Результати пошуку: великий проміжок перед «корм», а «Скинути» переносилось з відступом 10px під текст. */
body.amg-comm-standalone.amg-comm-polish .amg-comm .amg-comm-search-header{gap:4px 6px}
body.amg-comm-standalone.amg-comm-polish .amg-comm .amg-comm-search-clear{margin:-10px -10px -10px auto}

/* VF6. Кнопки на дотик: hover «прилипав» після тапу (iOS) → «Опублікувати» темно-жовта (#e0a600), «Пізніше» сіра.
 * Hover лише для миші, колір hover за токенами проєкту (#ffc832). */
body.amg-comm-standalone .amg-comm .amg-comm-submit:hover:not(:disabled){background:#ffc832!important;box-shadow:none}
@media (hover:none){
	body.amg-comm-standalone .amg-comm .amg-comm-submit:hover:not(:disabled){background:var(--accent,#ffba00)!important}
	body.amg-comm-standalone.amg-comm-pt .amg-comm-gate__later:hover{background:#fff}
}

/* VF7. Вікно пошуку на 360px виходило за правий край на 9px. */
@media (max-width:480px){
	body.amg-comm-standalone .amg-comm-modal__dialog{max-width:100vw;box-sizing:border-box}
}

/* VF8. Сторінка «Нова публікація» на ПК (≥768): поля впритул до ліній колонки (padding 0), шапка при цьому з відступом. */
@media (min-width:768px){
	body.amg-comm-standalone .amg-comm--compose .amg-comm-compose > form.amg-comm-card{padding:20px 24px}
}

/* VF9. Тред: під коментарями дві лінії з пустою смугою 32px перед «Більше публікацій». */
body.amg-comm-standalone .amg-comm .amg-comm-thread-single + .amg-comm-more-posts{margin-top:0;border-top:0}

/* VF10. Офіційний автор «Ветеринар AmigoVet» тонким шрифтом, усі інші імена жирні. */
body.amg-comm-standalone .amg-comm .amg-comm-name:not(:has(.amg-comm-name-text)){font-weight:700;color:var(--ink,#190a03)}

/* VF11. Ранг біля імені: у треді кольорова пігулка (помаранчева, рожева, бірюзова, жовта рамка), у профілі той самий ранг сірий.
 * Одна тиха пігулка для всіх рангів, як у профілі. */
body.amg-comm-standalone .amg-comm .amg-comm-rating[class*="amg-comm-rating--"]{background:var(--panel,#f5f5f5);border-color:var(--panel-line,#ebebeb);color:var(--ink,#190a03);font-weight:600}
body.amg-comm-standalone .amg-comm .amg-comm-rating[data-tier-info]:hover{background:#ebebeb;border-color:#ebebeb}

/* VF13. Вікно пошуку на 360: поле не стискалось (min-width:auto), кнопка «Пошук» вилазила за внутрішній відступ на 17px і за екран. */
body.amg-comm-standalone .amg-comm-posts-search-form .amg-comm-search-input{min-width:0;flex:1 1 auto}
body.amg-comm-standalone .amg-comm-posts-search-form .amg-comm-search-submit{flex:0 0 auto}

/* VF14. Шторка «+» на телефоні: нижнє меню під нею ховається (G15), а шторка стояла на 60px вище низу →
 * під нею проглядала стрічка. Коли меню сховане, шторка до самого низу. */
@media (max-width:1023px){
	body.amg-comm-standalone:has(.amg-comm-col-form.is-open) .amg-comm .amg-comm-col-form.is-open{bottom:0;padding-bottom:calc(20px + env(safe-area-inset-bottom));max-height:calc(100dvh - 60px)}
}

/* VF15. Шторка «+»: поля на 4px вужчі за кнопку «Опублікувати» (padding-right 4px у зоні прокрутки) → правий край «сходинкою».
 * Зона прокрутки виходить на 4px в обидва боки, поля й кнопка на одній лінії, місце для кільця фокусу лишається. */
@media (max-width:1023px){
	body.amg-comm-standalone .amg-comm .amg-comm-col-form .amg-comm-sections-wrap{margin-left:-4px;margin-right:-4px;padding-left:4px;padding-right:4px}
}

/* VF16. Фокус з клавіатури: кнопки мали синє кільце, а посилання (розділи, аватар, імʼя, заголовок, фото) чорне системне.
 * Одне синє кільце станів для всіх. */
body.amg-comm-standalone .amg-comm a:focus-visible,
body.amg-comm-standalone .amg-comm .amg-chip:focus-visible{outline:2px solid var(--state,#1c49c2);outline-offset:2px}

/* VF17. Нижнє меню на телефоні: після тапу hover «прилипає» (iOS) → сіра плашка на «Пошук»/«Улюбленці»
 * поряд із синьою «Головна», два пункти виглядають вибраними. На дотикових екранах hover-фону немає. */
@media (hover:none){
	body.amg-comm-standalone .amg-comm .amg-comm-bn-item:hover{background:transparent}
	body.amg-comm-standalone .amg-comm .amg-comm-bn-item:not(.is-active):hover{color:var(--muted)}
	/* те саме для чипів розділів у стрічці та у вікні пошуку: після тапу один чип лишався темнішим */
	body.amg-comm-standalone.amg-comm-polish .amg-comm .amg-comm-filterbar .amg-chip:hover,
	body.amg-comm-standalone.amg-comm-polish .amg-comm .amg-comm-search-hints__list a:hover{background:var(--panel)}
}


/* VF18 (Q-11, доповнення до G53). Назва товару в треді сама є посиланням, тож правило «a:hover [class*=title]» її не зачіпало.
 * При наведенні миші назва підкреслюється, розміри не змінюються. */
@media (hover:hover){
	body.amg-comm-standalone .amg-comm .amg-comm-products--shop a.amgv-card__title:hover{text-decoration:underline;text-underline-offset:3px;color:var(--ink,#190a03)}
}