/* micro-2709 (27.09.2026): статус «на связи», подсказки, плашка «Артур на связи». Моушн по спецификации Fable:
   точка неподвижна, кольцо три раза после сборки и тишина; плашка без повторяющегося движения; reduce выключает всё. */
:root { --ad-ok: #4a8f5c; --ad-ok-soft: rgba(74,143,92,.18); --ad-paper: #fffaf1; --ad-hair: #d9cdb8; --ad-ink: #141210; --ad-pencil: #6b645a; --ad-brick: #b5452a; --ad-shadow: 0 8px 24px rgba(20,18,16,.10); }
@keyframes ad-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ad-ring { 0% { transform: scale(1); opacity: .5; } 60%, 100% { transform: scale(2.4); opacity: 0; } }

/* 1. Статус у фото */
.ad-dot { position: absolute; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--ad-ok); border: 2px solid var(--ad-paper); box-shadow: 0 0 0 4px var(--ad-ok-soft); pointer-events: none; box-sizing: border-box; }
.ad-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--ad-ok); opacity: 0; animation: ad-ring 3200ms var(--motion-breath, cubic-bezier(.45,0,.55,1)) 1200ms 3 both; }
.ad-status { display: flex; align-items: center; gap: 6px; width: max-content; margin-top: 4px; color: var(--ad-pencil); font-weight: 500; letter-spacing: 0; animation: ad-in-up var(--motion-medium, 240ms) var(--motion-enter, cubic-bezier(.22,1,.36,1)) 520ms both; }
.ad-status::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ad-ok); }
.ad-status.ad-status-inline { display: inline-flex; width: auto; margin: 0 0 0 8px; vertical-align: 1px; }
:is(.hero-author, .hero-person) .ad-status.ad-status { font-size: 13px !important; line-height: 1.3 !important; }

/* 2. Подсказки */
.ad-sg { position: absolute; z-index: 30; box-sizing: border-box; max-height: 292px; overflow-y: auto; margin: 0; padding: 4px; background: var(--ad-paper); border: 1px solid var(--ad-hair); border-radius: 10px; box-shadow: var(--ad-shadow); text-align: left; animation: ad-in-up var(--motion-small, 160ms) var(--motion-enter, cubic-bezier(.22,1,.36,1)) both; }
.ad-sg[hidden] { display: none; }
/* Родитель поля поднимается над соседями, пока список открыт: на /yandexpro/ моушн даёт полю и кнопкам-примерам transform, и кнопки рисовались поверх списка. */
.ad-sg-open { z-index: 31 !important; }
.ad-sg .ad-sg-item { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 8px 12px; border-radius: 7px; color: var(--ad-ink); font-size: 15px !important; font-weight: 400; line-height: 1.3; cursor: pointer; }
.ad-sg .ad-sg-item b { font-weight: 700; }
.ad-sg .ad-sg-item.is-active, .ad-sg .ad-sg-item:hover { background: rgba(181,69,42,.08); }

/* 3. Плашка: телефон — полоса внизу */
.ad-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; box-sizing: border-box; color: var(--ad-ink); font-family: inherit; opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--motion-medium, 240ms) var(--motion-breath, cubic-bezier(.45,0,.55,1)), transform var(--motion-medium, 240ms) var(--motion-breath, cubic-bezier(.45,0,.55,1)), visibility 0s linear var(--motion-medium, 240ms); }
.ad-bar.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity var(--motion-large, 320ms) var(--motion-enter, cubic-bezier(.22,1,.36,1)), transform var(--motion-large, 320ms) var(--motion-enter, cubic-bezier(.22,1,.36,1)), visibility 0s; }
.ad-bar * { box-sizing: border-box; }
.ad-bar .ad-bar-toggle { display: none; }
.ad-bar .ad-bar-card { display: flex; align-items: center; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--ad-paper); border-top: 1px solid var(--ad-hair); box-shadow: 0 -6px 20px rgba(20,18,16,.06); }
.ad-bar .ad-bar-ava { position: relative; flex: none; width: 32px; height: 32px; }
.ad-bar .ad-bar-ava img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ad-bar .ad-bar-ava::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--ad-ok); border: 1.5px solid var(--ad-paper); }
.ad-bar .ad-bar-who { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; margin: 0; }
.ad-bar.ad-bar .ad-bar-who b { font-size: 14px !important; font-weight: 600; line-height: 1.2 !important; }
.ad-bar.ad-bar .ad-bar-who span { display: flex; align-items: center; gap: 5px; color: var(--ad-pencil); font-size: 12px !important; line-height: 1.3 !important; }
.ad-bar .ad-bar-who span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ad-ok); }
.ad-bar .ad-bar-note { display: none; }
.ad-bar .ad-bar-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; width: auto; min-width: 0; height: 42px; margin: 0; padding: 0 14px; border: 1px solid var(--ad-hair); border-radius: 999px; background: var(--ad-paper); color: var(--ad-ink); text-decoration: none; white-space: nowrap;
  transition: border-color var(--motion-small, 160ms) var(--motion-response, cubic-bezier(.2,.8,.2,1)), transform var(--motion-small, 160ms) var(--motion-response, cubic-bezier(.2,.8,.2,1)), box-shadow var(--motion-small, 160ms) var(--motion-response, cubic-bezier(.2,.8,.2,1)); }
.ad-bar.ad-bar .ad-bar-btn, .ad-bar.ad-bar .ad-bar-btn span { font-size: 14px !important; font-weight: 600; line-height: 1 !important; }
.ad-bar .ad-bar-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.ad-bar .ad-bar-max, .ad-bar .ad-bar-tg { width: 42px; padding: 0; }
.ad-bar.ad-bar .ad-bar-max span { font-size: 11px !important; font-weight: 700; letter-spacing: .02em; }
.ad-bar .ad-bar-tg .ad-bar-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ad-bar .ad-bar-form { background: var(--ad-brick); border-color: var(--ad-brick); color: var(--ad-paper); }
.ad-bar .ad-bar-btn:hover, .ad-bar .ad-bar-btn:focus-visible { border-color: var(--ad-brick); transform: translateY(-1px); box-shadow: 0 2px 0 rgba(181,69,42,.18); outline: 0; }
.ad-bar .ad-bar-btn:active { transform: none; box-shadow: none; transition-duration: 80ms; }
.ad-bar .ad-bar-btn:focus-visible { outline: 2px solid var(--ad-ink); outline-offset: 2px; }
@media (max-width: 379px) { .ad-bar .ad-bar-who { display: none; } .ad-bar .ad-bar-form { flex: 1 1 auto; } }
@media (max-width: 899px) { html.has-ad-bar body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } }

/* 3. Плашка: десктоп — круг справа внизу и карточка по клику */
@media (min-width: 900px) {
  .ad-bar { left: auto; right: 24px; bottom: 24px; transform: translateY(12px) scale(.94); transform-origin: 100% 100%; }
  .ad-bar.is-on { transform: none; }
  .ad-bar .ad-bar-toggle { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0; padding: 0; border: 1px solid var(--ad-hair); border-radius: 999px; background: var(--ad-paper); box-shadow: var(--ad-shadow); cursor: pointer;
    transition: border-color var(--motion-small, 160ms) var(--motion-response, cubic-bezier(.2,.8,.2,1)), transform var(--motion-small, 160ms) var(--motion-response, cubic-bezier(.2,.8,.2,1)); }
  .ad-bar .ad-bar-toggle:hover, .ad-bar .ad-bar-toggle:focus-visible, .ad-bar.is-open .ad-bar-toggle { border-color: var(--ad-brick); transform: translateY(-1px); }
  .ad-bar .ad-bar-toggle:focus-visible { outline: 2px solid var(--ad-ink); outline-offset: 3px; }
  .ad-bar .ad-bar-toggle .ad-bar-ava { width: 40px; height: 40px; }
  .ad-bar .ad-bar-toggle .ad-bar-ava::after { width: 11px; height: 11px; border-width: 2px; }
  .ad-bar.is-first .ad-bar-toggle .ad-bar-ava::before { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ad-ok); opacity: 0; animation: ad-ring 3200ms var(--motion-breath, cubic-bezier(.45,0,.55,1)) var(--motion-large, 320ms) 1 both; }
  .ad-bar .ad-bar-card { position: absolute; right: 0; bottom: calc(100% + 12px); width: 280px; flex-wrap: wrap; align-items: stretch; gap: 8px; padding: 16px; border: 1px solid var(--ad-hair); border-radius: 16px; box-shadow: var(--ad-shadow); transform-origin: 100% 100%;
    opacity: 0; visibility: hidden; transform: translateY(8px) scale(.96);
    transition: opacity var(--motion-small, 160ms) var(--motion-breath, cubic-bezier(.45,0,.55,1)), transform var(--motion-small, 160ms) var(--motion-breath, cubic-bezier(.45,0,.55,1)), visibility 0s linear var(--motion-small, 160ms); }
  .ad-bar.is-open .ad-bar-card { opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--motion-medium, 240ms) var(--motion-enter, cubic-bezier(.22,1,.36,1)), transform var(--motion-medium, 240ms) var(--motion-enter, cubic-bezier(.22,1,.36,1)), visibility 0s; }
  .ad-bar .ad-bar-card .ad-bar-ava { display: none; }
  .ad-bar .ad-bar-who { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 8px; }
  .ad-bar.ad-bar .ad-bar-who b { font-size: 16px !important; }
  .ad-bar.ad-bar .ad-bar-note { display: block; flex: 1 1 100%; margin: 0 0 4px; color: var(--ad-pencil); font-size: 13px !important; line-height: 1.45 !important; }
  .ad-bar .ad-bar-max, .ad-bar .ad-bar-tg { flex: 1 1 0; width: auto; padding: 0 12px; }
  .ad-bar.ad-bar .ad-bar-max span { font-size: 14px !important; font-weight: 600; letter-spacing: 0; }
  .ad-bar .ad-bar-tg .ad-bar-txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .ad-bar .ad-bar-form { flex: 1 1 100%; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-dot::after, .ad-bar .ad-bar-toggle .ad-bar-ava::before { display: none; animation: none; }
  .ad-status, .ad-sg, .ad-bar, .ad-bar .ad-bar-card, .ad-bar .ad-bar-btn, .ad-bar .ad-bar-toggle { animation: none; transition: none; }
}

/* Зоны касания не меньше 44 px и шапка не мельче 14 px (27.09, аудит 13). Где кнопка стоит в строке текста или в шапке,
   зону растим паддингом с равным отрицательным отступом: нажимать легче, а раскладка страницы не сдвигается. */
.site-header .header-nav, .site-header .header-nav a { font-size: 14px; }
.site-header .header-nav a:not(.header-contact) { padding: 13px 6px; margin: -13px -6px; }
.site-header .header-nav a.header-contact { min-height: 44px; box-sizing: border-box; }
.attention-actions .attention-secondary, a.attention-price-link { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
.generator .examples button, .chips button.chip, button.xp-hot, .lc-form .lc-consent { min-height: 44px; box-sizing: border-box; }
.question-list details > summary { padding-block: 9px; margin-block: -9px; }
.question-list details > summary::after { top: 10px; }
details.proto-full > summary { padding-block: 11px; margin-block: -11px; }
p.b-src a { display: inline-block; }
p.b-src a, .footer p a, .footer-row p a, .b-niches a, a.b-top, .footer > a { padding: 14px 9px; margin: -14px -9px; }
/* Телефон: в шапке /sites/ остаётся «Стоимость», как на трёх других страницах; написать можно из плашки и формы (27.09, шапка 14 px не влезала в 360). */
@media (max-width: 480px) { .site-header .header-nav a.header-contact { display: none; } }