/* CARDFAN-VOICE-S98-v1 — голосовий пошук у дизайні card-fan: рядок пошуку стає голосовим.
   Стани (data-vx на .search): prep (готую) · live (слухаю, рівень голосу) · think (розпізнаю) · msg (почуто) · err.
   Кольори — токени теми (--tx, --mu) + 2 власні на тему; розміри погодженого рядка НЕ змінюються. */
.dC{--vx-fg:#EFE8E1;--vx-ring:rgba(42,36,31,.16);--vx-grad:transparent 0 30%,#12a8a0 42%,#3b6cff 54%,#8a4dff 65%,#ff3d8b 75%,#ff9a3c 83%,#fff 87%,transparent 91%;--vx-edge-glow:drop-shadow(0 0 4px rgba(110,80,255,.35));--vx-vol:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(60,40,20,.06),0 1px 2px rgba(60,40,20,.10),0 6px 12px -4px rgba(60,40,20,.16),0 20px 36px -16px rgba(60,40,20,.30),0 44px 70px -34px rgba(60,40,20,.32)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="rose"]) .dC{--vx-fg:#2A2320;--vx-ring:rgba(251,248,244,.22);--vx-grad:transparent 0 30%,#4fe3d6 42%,#6e9bff 54%,#b78bff 65%,#ff7ab8 75%,#ffc36e 83%,#fff 87%,transparent 91%;--vx-edge-glow:drop-shadow(0 0 1.5px rgba(183,139,255,.9)) drop-shadow(0 0 8px rgba(110,155,255,.6));--vx-vol:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.45),0 6px 12px -4px rgba(0,0,0,.5),0 20px 36px -16px rgba(0,0,0,.65),0 44px 70px -34px rgba(0,0,0,.7)}
}
:root[data-theme="dark"] .dC{--vx-fg:#2A2320;--vx-ring:rgba(251,248,244,.22);--vx-grad:transparent 0 30%,#4fe3d6 42%,#6e9bff 54%,#b78bff 65%,#ff7ab8 75%,#ffc36e 83%,#fff 87%,transparent 91%;--vx-edge-glow:drop-shadow(0 0 1.5px rgba(183,139,255,.9)) drop-shadow(0 0 8px rgba(110,155,255,.6));--vx-vol:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.45),0 6px 12px -4px rgba(0,0,0,.5),0 20px 36px -16px rgba(0,0,0,.65),0 44px 70px -34px rgba(0,0,0,.7)}
:root[data-theme="rose"] .dC{--vx-fg:#FFF2F5;--vx-ring:rgba(90,42,64,.18);--vx-grad:transparent 0 30%,#12a8a0 42%,#3b6cff 54%,#8a4dff 65%,#ff3d8b 75%,#ff9a3c 83%,#fff 87%,transparent 91%;--vx-edge-glow:drop-shadow(0 0 4px rgba(156,31,88,.35));--vx-vol:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(90,42,64,.07),0 1px 2px rgba(90,42,64,.12),0 6px 12px -4px rgba(90,42,64,.18),0 20px 36px -16px rgba(90,42,64,.30),0 44px 70px -34px rgba(90,42,64,.30)}

/* накладка на текстову зону (left/right — з voice.js за реальною геометрією) */
.dC .search .vx{position:absolute;top:0;bottom:0;left:22px;right:70px;z-index:2;display:flex;align-items:center;gap:14px;
  pointer-events:none;opacity:0;transition:opacity .22s ease}
.dC .search.vx-on .vx{opacity:1}
.dC .search .vx-st{flex:0 1 auto;min-width:0;max-width:44%;font:600 16px/1.2 Manrope,sans-serif;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.dC .search[data-vx="live"] .vx-st,.dC .search[data-vx="msg"] .vx-st{color:var(--tx)}
/* s98vh живі крапки: три крапки спалахують і злегка підстрибують хвилею; ширина стала (текст не смикається) */
.dC .search .vx-dots{display:inline-flex;width:1.45em;justify-content:flex-start}   /* s98vi: крапки більші (Max: «іноді погано видно») */
.dC .search .vx-dots i{font-style:normal;display:inline-block;font-size:1.35em;line-height:.7;font-weight:800;opacity:.25;animation:vxDot 1.2s ease-in-out infinite}
.dC .search .vx-dots i:nth-child(2){animation-delay:.18s}
.dC .search .vx-dots i:nth-child(3){animation-delay:.36s}
/* s98vj: помилка — другий рядок «Спробуйте ще раз» (дрібніше, сірим) + мікрожест «ні» (похитування напису) */
.dC .search .vx-sub{display:block;font-weight:500;font-size:.88em;color:var(--mu);margin-top:1px}
.dC .search[data-vx="err"] .vx-st{color:var(--tx);animation:vxNo .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes vxNo{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
@keyframes vxDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
/* смужки — стале місце праворуч: довжина статусу їх не зсуває (CLS 0) */
.dC .search .vx-wv{position:absolute;right:0;top:50%;width:54%;margin-top:-14px;height:28px;display:flex;align-items:center;justify-content:center;gap:3px;overflow:hidden}
.dC .search .vx-wv i{flex:0 0 3px;height:100%;border-radius:2px;background:var(--tx);opacity:.85;transform:scaleY(.12);transform-origin:50% 50%;will-change:transform}
.dC .search[data-vx="prep"] .vx-wv i{opacity:.35}
.dC .search[data-vx="think"] .vx-wv i{animation:vxThink 1s ease-in-out infinite;animation-delay:var(--d,0s)}
.dC .search[data-vx="msg"] .vx-wv,.dC .search[data-vx="err"] .vx-wv,.dC .search[data-vx="prep"] .vx-wv{visibility:hidden}
/* s98vi: «готую» (дозвіл мікрофона) / почуто / помилка — смужок немає, статус на всю ширину, довгий — до 2 рядків, не обрізається */
.dC .search[data-vx="msg"] .vx-st,.dC .search[data-vx="err"] .vx-st,.dC .search[data-vx="prep"] .vx-st{max-width:100%;white-space:normal;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:clip}
@keyframes vxThink{0%,100%{transform:scaleY(.12);opacity:.45}50%{transform:scaleY(.5);opacity:.9}}

/* поле й допоміжні кнопки ховаються БЕЗ зміни геометрії */
.dC .search.vx-on #search{color:transparent;caret-color:transparent}   /* id: переважує кольори тем (темна / rose) */
.dC .search.vx-on #search::placeholder{color:transparent}
.dC .search.vx-on #cam,.dC .search.vx-on #clear{visibility:hidden}

/* 🎤 -> «стоп»: квадрат + кільце, що дихає гучністю (--vx-lv 0..1 з voice.js) */
.dC .search.vx-on #mic{animation:none;color:var(--vx-fg)}
.dC .search #mic.vx-stop{box-shadow:0 0 0 calc(3px + var(--vx-lv,0) * 9px) var(--vx-ring);transition:box-shadow .09s linear,transform .25s}
.dC .search #mic.vx-stop svg{display:none}
.dC .search #mic.vx-stop::after{content:"";width:14px;height:14px;border-radius:4px;background:currentColor}
.dC .search[data-vx="think"] #mic svg,.dC .search[data-vx="msg"] #mic svg,.dC .search[data-vx="err"] #mic svg{opacity:.5}

/* s98vg (Max: «блок мутний… змініть тінями для об'єму»): на час голосу рядок СУЦІЛЬНИЙ (без скла — крізь нього не
   просвічує розмитий фон) і ОБ'ЄМНИЙ: світлий відблиск згори + близька чітка тінь + далекі м'які (--vx-vol, по темах).
   Аура (розмита пляма) прибрана. :not(#vx) — специфічність над правилами тем дизайну без !important. */
:root:not(#vx) .dC .search.vx-on{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--vx-vol)}
:root:not(#vx) .dC .search.vx-on::before{opacity:0}
/* FX-2 підйом: окремі властивості scale/translate складаються з transform дизайну (--slift), верстка не рухається */
.dC .search{transition:scale .4s cubic-bezier(.2,.8,.2,1),translate .4s cubic-bezier(.2,.8,.2,1)}
.dC .search.vx-on{scale:1.015;translate:0 -2px}
/* FX-4 відблиск під час розпізнавання — МАСКА лише на самих смужках (s98vd: накладка давала пляму на склі темної теми) */
.dC .search[data-vx="think"] .vx-wv{
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 35%,#000 50%,rgba(0,0,0,.3) 65%,rgba(0,0,0,.3) 100%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 35%,#000 50%,rgba(0,0,0,.3) 65%,rgba(0,0,0,.3) 100%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;animation:vxSheen 1.2s linear infinite}
@keyframes vxSheen{0%{-webkit-mask-position:100% 0;mask-position:100% 0}100%{-webkit-mask-position:0% 0;mask-position:0% 0}}

/* FX-5 світло обертається по КРАЮ рядка. s98vg — варіант «C», обраний Max на демо: 3.5px, РІЗНОКОЛЬОРОВИЙ перелив (Max: «не мідний»), світла «голова»,
   довший хвіст, 2.6 с/коло, весь час голосу (готую / слухаю / розпізнаю). Кільце — дитина рядка (рухається з ним),
   маска лишає лише край; світіння — drop-shadow на обгортці (--vx-edge-glow, по темах). */
.dC .search .vx-edge{position:absolute;inset:-3.5px;z-index:0;border-radius:27.5px;pointer-events:none;opacity:0;
  transition:opacity .35s ease;filter:var(--vx-edge-glow)}
.dC .search[data-vx="prep"] .vx-edge,.dC .search[data-vx="live"] .vx-edge,.dC .search[data-vx="think"] .vx-edge{opacity:1}
.dC .search .vx-ring{position:absolute;inset:0;border-radius:inherit;padding:3.5px;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.dC .search .vx-ring::before{content:"";position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(0turn);
  background:conic-gradient(from 0deg,var(--vx-grad));
  animation:vxSpin 2.6s linear infinite}
@keyframes vxSpin{to{transform:translate(-50%,-50%) rotate(1turn)}}

/* невидимий статус для екранного читача */
.dC .search .vx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* фокус: решта сторінки пригасає мовою туру (spot-on), не клікається, не рухається.
   s98ve (Max): рівень як у s98vc (шапка чітка), АЛЕ пригасають і результати попереднього пошуку —
   другий голосовий пошук на екрані результатів (#results, перемикач галереї). */
.dC #results,.dC #galleryToggleWrap{transition:filter .5s ease,opacity .5s ease}
.vx-active .dC h1.hl,.vx-active .dC .lede.hs,.vx-active .dC .fan,.vx-active .dC .hsup,.vx-active .dC .bot .chipsC,.vx-active .dC .foot,
.vx-active .dC #results,.vx-active .dC #galleryToggleWrap{
  filter:grayscale(1) blur(2.5px);opacity:.42;pointer-events:none}

@media (max-width:600px){
  .dC .search .vx{gap:10px}
  .dC .search .vx-st{font-size:14px}
  .dC .search .vx-wv{height:22px;margin-top:-11px;gap:2px}
  .dC .search .vx-wv i{flex-basis:3px}
  .dC .search #mic.vx-stop::after{width:12px;height:12px;border-radius:3px}
}
@media (prefers-reduced-motion:reduce){
  .dC .search .vx,.dC .search .vx-st{transition:none}
  .dC .search[data-vx="think"] .vx-wv i{animation:none;opacity:.6}
  .dC .search #mic.vx-stop{transition:none}
  .dC .search{transition:none}
  .dC .search.vx-on{scale:none;translate:none}
  .dC .search[data-vx="think"] .vx-wv{animation:none}
  .dC .search .vx-dots i{animation:none;opacity:.7}
  .dC .search[data-vx="err"] .vx-st{animation:none}
  .dC #results,.dC #galleryToggleWrap{transition:none}
  .vx-active .dC h1.hl,.vx-active .dC .lede.hs,.vx-active .dC .fan,.vx-active .dC .hsup,.vx-active .dC .bot .chipsC,.vx-active .dC .foot,
  .vx-active .dC #results,.vx-active .dC #galleryToggleWrap{filter:none;opacity:.55}
  .dC .search .vx-ring::before{animation:none}
}

/* FL-VOICE-INNER-S101-v1 (Max 14.10): ТОЙ САМИЙ показ голосу на сторінках постачальника / колекції / галереї — спільне поле пошуку (.fl-sbox).
   Копія правил вище (заміни: .dC .search -> .fl-in~.fl-sbar .fl-sbox; пригасання — слоган, список, результати, рядок галереї); правила головної — без змін.
   Токени дизайну внутрішніх сторінок: --ink / --muted -> --tx / --mu (як на головній). */
.fl-in~.fl-sbar{--tx:var(--ink);--mu:var(--muted)}
.fl-in~.fl-sbar{--vx-fg:#EFE8E1;--vx-ring:rgba(42,36,31,.16);--vx-grad:transparent 0 30%,#12a8a0 42%,#3b6cff 54%,#8a4dff 65%,#ff3d8b 75%,#ff9a3c 83%,#fff 87%,transparent 91%;--vx-edge-glow:drop-shadow(0 0 4px rgba(110,80,255,.35));--vx-vol:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(60,40,20,.06),0 1px 2px rgba(60,40,20,.10),0 6px 12px -4px rgba(60,40,20,.16),0 20px 36px -16px rgba(60,40,20,.30),0 44px 70px -34px rgba(60,40,20,.32)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="rose"]) .fl-in~.fl-sbar{--vx-fg:#2A2320;--vx-ring:rgba(251,248,244,.22);--vx-grad:transparent 0 30%,#4fe3d6 42%,#6e9bff 54%,#b78bff 65%,#ff7ab8 75%,#ffc36e 83%,#fff 87%,transparent 91%;--vx-edge-glow:drop-shadow(0 0 1.5px rgba(183,139,255,.9)) drop-shadow(0 0 8px rgba(110,155,255,.6));--vx-vol:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.45),0 6px 12px -4px rgba(0,0,0,.5),0 20px 36px -16px rgba(0,0,0,.65),0 44px 70px -34px rgba(0,0,0,.7)}
}
:root[data-theme="dark"] .fl-in~.fl-sbar{--vx-fg:#2A2320;--vx-ring:rgba(251,248,244,.22);--vx-grad:transparent 0 30%,#4fe3d6 42%,#6e9bff 54%,#b78bff 65%,#ff7ab8 75%,#ffc36e 83%,#fff 87%,transparent 91%;--vx-edge-glow:drop-shadow(0 0 1.5px rgba(183,139,255,.9)) drop-shadow(0 0 8px rgba(110,155,255,.6));--vx-vol:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.45),0 6px 12px -4px rgba(0,0,0,.5),0 20px 36px -16px rgba(0,0,0,.65),0 44px 70px -34px rgba(0,0,0,.7)}
:root[data-theme="rose"] .fl-in~.fl-sbar{--vx-fg:#FFF2F5;--vx-ring:rgba(90,42,64,.18);--vx-grad:transparent 0 30%,#12a8a0 42%,#3b6cff 54%,#8a4dff 65%,#ff3d8b 75%,#ff9a3c 83%,#fff 87%,transparent 91%;--vx-edge-glow:drop-shadow(0 0 4px rgba(156,31,88,.35));--vx-vol:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(90,42,64,.07),0 1px 2px rgba(90,42,64,.12),0 6px 12px -4px rgba(90,42,64,.18),0 20px 36px -16px rgba(90,42,64,.30),0 44px 70px -34px rgba(90,42,64,.30)}

/* накладка на текстову зону (left/right — з voice.js за реальною геометрією) */
.fl-in~.fl-sbar .fl-sbox .vx{position:absolute;top:0;bottom:0;left:22px;right:70px;z-index:2;display:flex;align-items:center;gap:14px;
  pointer-events:none;opacity:0;transition:opacity .22s ease}
.fl-in~.fl-sbar .fl-sbox.vx-on .vx{opacity:1}
.fl-in~.fl-sbar .fl-sbox .vx-st{flex:0 1 auto;min-width:0;max-width:44%;font:600 16px/1.2 Manrope,sans-serif;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.fl-in~.fl-sbar .fl-sbox[data-vx="live"] .vx-st,.fl-in~.fl-sbar .fl-sbox[data-vx="msg"] .vx-st{color:var(--tx)}
/* s98vh живі крапки: три крапки спалахують і злегка підстрибують хвилею; ширина стала (текст не смикається) */
.fl-in~.fl-sbar .fl-sbox .vx-dots{display:inline-flex;width:1.45em;justify-content:flex-start}   /* s98vi: крапки більші (Max: «іноді погано видно») */
.fl-in~.fl-sbar .fl-sbox .vx-dots i{font-style:normal;display:inline-block;font-size:1.35em;line-height:.7;font-weight:800;opacity:.25;animation:vxDot 1.2s ease-in-out infinite}
.fl-in~.fl-sbar .fl-sbox .vx-dots i:nth-child(2){animation-delay:.18s}
.fl-in~.fl-sbar .fl-sbox .vx-dots i:nth-child(3){animation-delay:.36s}
/* s98vj: помилка — другий рядок «Спробуйте ще раз» (дрібніше, сірим) + мікрожест «ні» (похитування напису) */
.fl-in~.fl-sbar .fl-sbox .vx-sub{display:block;font-weight:500;font-size:.88em;color:var(--mu);margin-top:1px}
.fl-in~.fl-sbar .fl-sbox[data-vx="err"] .vx-st{color:var(--tx);animation:vxNo .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes vxNo{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
@keyframes vxDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
/* смужки — стале місце праворуч: довжина статусу їх не зсуває (CLS 0) */
.fl-in~.fl-sbar .fl-sbox .vx-wv{position:absolute;right:0;top:50%;width:54%;margin-top:-14px;height:28px;display:flex;align-items:center;justify-content:center;gap:3px;overflow:hidden}
.fl-in~.fl-sbar .fl-sbox .vx-wv i{flex:0 0 3px;height:100%;border-radius:2px;background:var(--tx);opacity:.85;transform:scaleY(.12);transform-origin:50% 50%;will-change:transform}
.fl-in~.fl-sbar .fl-sbox[data-vx="prep"] .vx-wv i{opacity:.35}
.fl-in~.fl-sbar .fl-sbox[data-vx="think"] .vx-wv i{animation:vxThink 1s ease-in-out infinite;animation-delay:var(--d,0s)}
.fl-in~.fl-sbar .fl-sbox[data-vx="msg"] .vx-wv,.fl-in~.fl-sbar .fl-sbox[data-vx="err"] .vx-wv,.fl-in~.fl-sbar .fl-sbox[data-vx="prep"] .vx-wv{visibility:hidden}
/* s98vi: «готую» (дозвіл мікрофона) / почуто / помилка — смужок немає, статус на всю ширину, довгий — до 2 рядків, не обрізається */
.fl-in~.fl-sbar .fl-sbox[data-vx="msg"] .vx-st,.fl-in~.fl-sbar .fl-sbox[data-vx="err"] .vx-st,.fl-in~.fl-sbar .fl-sbox[data-vx="prep"] .vx-st{max-width:100%;white-space:normal;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:clip}
@keyframes vxThink{0%,100%{transform:scaleY(.12);opacity:.45}50%{transform:scaleY(.5);opacity:.9}}

/* поле й допоміжні кнопки ховаються БЕЗ зміни геометрії */
.fl-in~.fl-sbar .fl-sbox.vx-on #search{color:transparent;caret-color:transparent}   /* id: переважує кольори тем (темна / rose) */
.fl-in~.fl-sbar .fl-sbox.vx-on #search::placeholder{color:transparent}
.fl-in~.fl-sbar .fl-sbox.vx-on #cam,.fl-in~.fl-sbar .fl-sbox.vx-on #clear{visibility:hidden}

/* 🎤 -> «стоп»: квадрат + кільце, що дихає гучністю (--vx-lv 0..1 з voice.js) */
.fl-in~.fl-sbar .fl-sbox.vx-on #mic{animation:none;color:var(--vx-fg)}
.fl-in~.fl-sbar .fl-sbox #mic.vx-stop{box-shadow:0 0 0 calc(3px + var(--vx-lv,0) * 9px) var(--vx-ring);transition:box-shadow .09s linear,transform .25s}
.fl-in~.fl-sbar .fl-sbox #mic.vx-stop svg{display:none}
.fl-in~.fl-sbar .fl-sbox #mic.vx-stop::after{content:"";width:14px;height:14px;border-radius:4px;background:currentColor}
.fl-in~.fl-sbar .fl-sbox[data-vx="think"] #mic svg,.fl-in~.fl-sbar .fl-sbox[data-vx="msg"] #mic svg,.fl-in~.fl-sbar .fl-sbox[data-vx="err"] #mic svg{opacity:.5}

/* s98vg (Max: «блок мутний… змініть тінями для об'єму»): на час голосу рядок СУЦІЛЬНИЙ (без скла — крізь нього не
   просвічує розмитий фон) і ОБ'ЄМНИЙ: світлий відблиск згори + близька чітка тінь + далекі м'які (--vx-vol, по темах).
   Аура (розмита пляма) прибрана. :not(#vx) — специфічність над правилами тем дизайну без !important. */
:root:not(#vx) .fl-in~.fl-sbar .fl-sbox.vx-on{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--vx-vol)}
:root:not(#vx) .fl-in~.fl-sbar .fl-sbox.vx-on::before{opacity:0}
/* FX-2 підйом: окремі властивості scale/translate складаються з transform дизайну (--slift), верстка не рухається */
.fl-in~.fl-sbar .fl-sbox{transition:scale .4s cubic-bezier(.2,.8,.2,1),translate .4s cubic-bezier(.2,.8,.2,1)}
.fl-in~.fl-sbar .fl-sbox.vx-on{scale:1.015;translate:0 -2px}
/* FX-4 відблиск під час розпізнавання — МАСКА лише на самих смужках (s98vd: накладка давала пляму на склі темної теми) */
.fl-in~.fl-sbar .fl-sbox[data-vx="think"] .vx-wv{
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 35%,#000 50%,rgba(0,0,0,.3) 65%,rgba(0,0,0,.3) 100%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 35%,#000 50%,rgba(0,0,0,.3) 65%,rgba(0,0,0,.3) 100%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;animation:vxSheen 1.2s linear infinite}
@keyframes vxSheen{0%{-webkit-mask-position:100% 0;mask-position:100% 0}100%{-webkit-mask-position:0% 0;mask-position:0% 0}}

/* FX-5 світло обертається по КРАЮ рядка. s98vg — варіант «C», обраний Max на демо: 3.5px, РІЗНОКОЛЬОРОВИЙ перелив (Max: «не мідний»), світла «голова»,
   довший хвіст, 2.6 с/коло, весь час голосу (готую / слухаю / розпізнаю). Кільце — дитина рядка (рухається з ним),
   маска лишає лише край; світіння — drop-shadow на обгортці (--vx-edge-glow, по темах). */
.fl-in~.fl-sbar .fl-sbox .vx-edge{position:absolute;inset:-3.5px;z-index:0;border-radius:27.5px;pointer-events:none;opacity:0;
  transition:opacity .35s ease;filter:var(--vx-edge-glow)}
.fl-in~.fl-sbar .fl-sbox[data-vx="prep"] .vx-edge,.fl-in~.fl-sbar .fl-sbox[data-vx="live"] .vx-edge,.fl-in~.fl-sbar .fl-sbox[data-vx="think"] .vx-edge{opacity:1}
.fl-in~.fl-sbar .fl-sbox .vx-ring{position:absolute;inset:0;border-radius:inherit;padding:3.5px;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fl-in~.fl-sbar .fl-sbox .vx-ring::before{content:"";position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(0turn);
  background:conic-gradient(from 0deg,var(--vx-grad));
  animation:vxSpin 2.6s linear infinite}
@keyframes vxSpin{to{transform:translate(-50%,-50%) rotate(1turn)}}

/* невидимий статус для екранного читача */
.fl-in~.fl-sbar .fl-sbox .vx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* фокус: решта сторінки пригасає мовою туру (spot-on), не клікається, не рухається.
   s98ve (Max): рівень як у s98vc (шапка чітка), АЛЕ пригасають і результати попереднього пошуку —
   другий голосовий пошук на екрані результатів (#results, перемикач галереї). */
.fl-in~.fl-hero-link,.fl-in~#results,.fl-in~.fl-sres,.fl-in~.gallery-toggle-wrap,.fl-galhead,nav.crumbs{transition:filter .5s ease,opacity .5s ease}
.vx-active .fl-in~.fl-hero-link,.vx-active .fl-in~#results,.vx-active .fl-in~.fl-sres,.vx-active .fl-in~.gallery-toggle-wrap,.vx-active .fl-galhead,.vx-active nav.crumbs{
  filter:grayscale(1) blur(2.5px);opacity:.42;pointer-events:none}

@media (max-width:600px){
  .fl-in~.fl-sbar .fl-sbox .vx{gap:10px}
  .fl-in~.fl-sbar .fl-sbox .vx-st{font-size:14px}
  .fl-in~.fl-sbar .fl-sbox .vx-wv{height:22px;margin-top:-11px;gap:2px}
  .fl-in~.fl-sbar .fl-sbox .vx-wv i{flex-basis:3px}
  .fl-in~.fl-sbar .fl-sbox #mic.vx-stop::after{width:12px;height:12px;border-radius:3px}
}
@media (prefers-reduced-motion:reduce){
  .fl-in~.fl-sbar .fl-sbox .vx,.fl-in~.fl-sbar .fl-sbox .vx-st{transition:none}
  .fl-in~.fl-sbar .fl-sbox[data-vx="think"] .vx-wv i{animation:none;opacity:.6}
  .fl-in~.fl-sbar .fl-sbox #mic.vx-stop{transition:none}
  .fl-in~.fl-sbar .fl-sbox{transition:none}
  .fl-in~.fl-sbar .fl-sbox.vx-on{scale:none;translate:none}
  .fl-in~.fl-sbar .fl-sbox[data-vx="think"] .vx-wv{animation:none}
  .fl-in~.fl-sbar .fl-sbox .vx-dots i{animation:none;opacity:.7}
  .fl-in~.fl-sbar .fl-sbox[data-vx="err"] .vx-st{animation:none}
  .fl-in~.fl-hero-link,.fl-in~#results,.fl-in~.fl-sres,.fl-in~.gallery-toggle-wrap,.fl-galhead,nav.crumbs{transition:none}
  .vx-active .fl-in~.fl-hero-link,.vx-active .fl-in~#results,.vx-active .fl-in~.fl-sres,.vx-active .fl-in~.gallery-toggle-wrap,.vx-active .fl-galhead,.vx-active nav.crumbs{filter:none;opacity:.55}
  .fl-in~.fl-sbar .fl-sbox .vx-ring::before{animation:none}
}