/* Модуль «ИИ-ассистент»: «рентген» ответа и особенности мини-виджетами.
   Разметка — resources/views/site/modules/ai-assistant.blade.php, сценарий — ai-assistant.js */
.aix, .aif {
    --ai: #6a4fd0; --ai-2: #8b74ee; --ai-soft: #f1edfd; --ai-ink: #2b2163;
    --wa: #1c8f4e; --wa-bg: #dcf5e4;
    --night: #0e0f1a; --night-2: #161829; --night-line: rgba(255, 255, 255, .08); --night-ink: #e9e8f6; --night-mut: #9a98b8;
    --ce: cubic-bezier(.2, .7, .2, 1);
    --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}
.aix-head { max-width: 800px; }
.aix-head .lead { margin-top: 18px; }

/* ── Вкладки сценариев ── */
.aix-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 40px; }
.aix-tab {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; text-align: left;
    padding: 12px 14px 14px; border-radius: 14px; border: 1px solid var(--line-card); background: #fff; transition: border-color .2s, background .2s, box-shadow .2s;
}
.aix-tab:hover { border-color: #d3cdf3; }
.aix-tab[aria-selected='true'] { border-color: var(--ai); background: linear-gradient(180deg, #fbfaff, #fff); box-shadow: 0 8px 24px rgba(106, 79, 208, .12); }
.aix-tab-n { font: 600 12px/1 var(--mono); color: var(--faint); }
.aix-tab[aria-selected='true'] .aix-tab-n { color: var(--ai); }
.aix-tab-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aix-tab-t b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aix-tab-t small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.aix-tab-l { font: 600 11px/1 var(--mono); padding: 5px 7px; border-radius: 6px; background: var(--ai-soft); color: var(--ai); white-space: nowrap; }
.aix-tab-bar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--row); overflow: hidden; font-style: normal; }
.aix-tab-bar i { display: block; height: 100%; background: var(--ai); transform-origin: left; transform: scaleX(0); }

/* ── Сцена ── */
.aix-stage {
    position: relative; margin-top: 14px; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px; padding: 28px;
    border-radius: 22px; background: var(--night); overflow: hidden; isolation: isolate; user-select: none;
    box-shadow: 0 30px 80px rgba(14, 15, 26, .22);
}
.aix-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(520px 340px at 12% 0%, rgba(106, 79, 208, .45), transparent 70%),
        radial-gradient(600px 420px at 100% 100%, rgba(47, 91, 216, .35), transparent 70%),
        linear-gradient(var(--night-line) 1px, transparent 1px) 0 0 / 100% 32px,
        linear-gradient(90deg, var(--night-line) 1px, transparent 1px) 0 0 / 32px 100%;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse at 50% 40%, #000 55%, transparent 100%);
}
.aix.is-fast .aix-stage *, .aix.is-fast .aix-stage *::before, .aix.is-fast .aix-stage *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }

/* Телефон */
.aix-phone { position: relative; display: flex; flex-direction: column; height: 600px; border-radius: 26px; background: #efeae2; overflow: hidden; box-shadow: 0 0 0 6px #1d1f33, 0 0 0 7px #2c2f49, 0 24px 60px rgba(0, 0, 0, .45); }
.aix-phone[data-ch='app'] { background: #f4f5f9; }
.aix-phone[data-ch='wa'] .aix-msgs { background-image: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .025) 1px, transparent 1.5px); background-size: 14px 14px; }
.aix-ph-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; background: #fff; border-bottom: 1px solid var(--line); flex: none; }
.aix-ava { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: conic-gradient(from 200deg, #6a4fd0, #2f5bd8, #9b7bff, #6a4fd0); flex: none; }
.aix-ph-who { min-width: 0; display: flex; flex-direction: column; }
.aix-ph-who b { font-size: 15px; }
.aix-ph-who small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.aix-ph-who small i { width: 7px; height: 7px; border-radius: 50%; background: #22a35a; }
.aix-ph-who small.is-typing span { color: var(--ai); }
.aix-ch { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--wa-bg); color: var(--wa); white-space: nowrap; }
.aix-ch[data-ch='app'] { background: var(--accent-soft); color: var(--accent); }
.aix-msgs { position: relative; flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 40px); mask-image: linear-gradient(transparent, #000 40px); }
.aix-msgs-in { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.aix-b { position: relative; max-width: 84%; padding: 8px 11px 7px; border-radius: 14px; font-size: 14px; line-height: 1.42; background: #fff; color: var(--ink); box-shadow: 0 1px 1px rgba(0, 0, 0, .06); animation: aix-msg .4s var(--ce) both; overflow-wrap: anywhere; }
@keyframes aix-msg { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.aix-b.is-in { align-self: flex-end; background: #d9fdd3; border-bottom-right-radius: 4px; }
.aix-phone[data-ch='app'] .aix-b.is-in { background: var(--accent); color: #fff; }
.aix-b.is-out { align-self: flex-start; border-bottom-left-radius: 4px; }
.aix-b.is-op { align-self: flex-start; border-bottom-left-radius: 4px; background: #fff; box-shadow: inset 3px 0 0 var(--accent), 0 1px 1px rgba(0, 0, 0, .06); }
.aix-b.is-op small { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.aix-b time { float: right; margin: 6px 0 -3px 10px; font-size: 10.5px; color: rgba(0, 0, 0, .4); display: inline-flex; align-items: center; gap: 2px; }
.aix-b.is-in time { color: #4f8e57; }
.aix-phone[data-ch='app'] .aix-b.is-in time { color: rgba(255, 255, 255, .75); }
.aix-b.is-typing { padding: 11px 13px; }
.aix-dots { display: inline-flex; gap: 4px; }
.aix-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ai); opacity: .3; animation: aix-dot 1.1s infinite; }
.aix-dots i:nth-child(2) { animation-delay: .15s; }
.aix-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes aix-dot { 30% { opacity: 1; transform: translateY(-3px); } }
/* карточки в чате */
.aix-card { align-self: flex-start; width: 270px; max-width: 88%; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 8px 22px rgba(20, 20, 19, .10); animation: aix-msg .45s var(--ce) both; }
.aix-card-top { display: flex; align-items: center; gap: 10px; padding: 12px; }
.aix-card-top > span:first-child { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ai-soft); color: var(--ai); flex: none; }
.aix-card-top div { min-width: 0; flex: 1; }
.aix-card-top b { display: block; font-size: 14px; }
.aix-card-top small { display: block; font-size: 12px; color: var(--muted); }
.aix-card-v { margin-left: auto; font-size: 15px; font-weight: 700; white-space: nowrap; }
.aix-card-pays { display: flex; gap: 4px; padding: 0 12px 12px; }
.aix-card-pays span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; height: 30px; border-radius: 8px; background: var(--chip); font-size: 12px; font-weight: 500; white-space: nowrap; }
.aix-card-pays span:first-child { background: var(--ink); color: #fff; }
.aix-card.is-video { width: 250px; }
.aix-vid { position: relative; height: 128px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 30%, #4d5ad6, #1d2150 70%); }
.aix-vid::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 12px, transparent 12px 24px); }
.aix-vid > span { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); backdrop-filter: blur(4px); animation: aix-ring 1.8s ease-out infinite; }
@keyframes aix-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }
.aix-vid em { position: absolute; right: 8px; bottom: 8px; font-style: normal; font-size: 11px; padding: 2px 6px; border-radius: 5px; background: rgba(0, 0, 0, .5); }
.aix-card.is-video .aix-card-top { padding: 9px 12px; }
.aix-card.is-paid .aix-card-top > span:first-child { background: var(--ok-soft); color: var(--ok); }
.aix-card.is-paid .aix-card-v { color: var(--ok); }
/* сканирующая полоса «рентгена» */
.aix-scan { position: absolute; left: 0; right: 0; top: 66px; height: 90px; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(106, 79, 208, .08) 80%, rgba(139, 116, 238, .55) 98%, transparent); }
.aix-scan::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; background: linear-gradient(90deg, transparent, #b9a8ff 20%, #fff 50%, #b9a8ff 80%, transparent); box-shadow: 0 0 14px 2px rgba(139, 116, 238, .7); }
.aix-phone.is-think .aix-scan { animation: aix-scan 1.6s ease-in-out infinite; }
@keyframes aix-scan { 0% { opacity: 0; transform: translateY(-40px); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(400px); } }
.aix-compose { display: flex; align-items: center; gap: 8px; margin: 8px 10px 10px; flex: none; }
.aix-compose span { flex: 1; height: 40px; display: flex; align-items: center; padding: 0 16px; border-radius: 999px; background: #fff; color: var(--ph); font-size: 14px; }
.aix-compose i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: #fff; }
.aix-phone[data-ch='app'] .aix-compose i { background: var(--accent); }

/* Ход работы */
.aix-trace { position: relative; display: flex; flex-direction: column; min-width: 0; height: 600px; color: var(--night-ink); }
.aix-tr-head { display: flex; align-items: flex-start; gap: 12px; }
.aix-tr-t { display: flex; flex-direction: column; gap: 2px; }
.aix-tr-t b { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.aix-tr-t b .i { color: var(--ai-2); }
.aix-tr-t small { font-size: 13px; color: var(--night-mut); }
.aix-tr-who { margin-left: auto; font-size: 12.5px; color: var(--night-mut); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--night-line); white-space: nowrap; }
.aix-ms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.aix-m { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--night-line); transition: border-color .3s, background .3s; }
.aix-m span { display: block; font-size: 11.5px; color: var(--night-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aix-m b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.aix-m.is-hot { border-color: rgba(139, 116, 238, .6); background: rgba(106, 79, 208, .14); }
.aix-m.is-good b { color: #6fe0a0; }
.aix-m.is-human b { color: #8fb0ff; }
.aix-steps-wrap { position: relative; flex: 1; min-height: 0; margin-top: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 48px); mask-image: linear-gradient(transparent, #000 48px); }
.aix-steps { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding-left: 26px; }
.aix-steps::before { content: ''; position: absolute; left: 9px; top: 0; bottom: 14px; width: 2px; background: linear-gradient(transparent, rgba(139, 116, 238, .5) 40px); }
.aix-idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--night-mut); font-size: 14px; }
.aix-idle i { width: 6px; height: 6px; border-radius: 50%; background: var(--night-mut); opacity: .4; animation: aix-dot 1.2s infinite; }
.aix-idle i:nth-child(2) { animation-delay: .15s; }
.aix-idle i:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
.aix-s { position: relative; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .045); border: 1px solid var(--night-line); animation: aix-step .5s var(--ce) both; }
@keyframes aix-step { from { opacity: 0; transform: translateX(-14px); filter: blur(3px); } }
.aix-s::before { content: ''; position: absolute; left: -22px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--night); border: 2px solid var(--ai-2); }
.aix-s.is-new::before { background: var(--ai-2); box-shadow: 0 0 0 0 rgba(139, 116, 238, .7); animation: aix-pulse 1.2s ease-out 2; }
@keyframes aix-pulse { to { box-shadow: 0 0 0 10px rgba(139, 116, 238, 0); } }
.aix-s-h { display: flex; align-items: center; gap: 8px; }
.aix-kind { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: rgba(139, 116, 238, .18); color: #c9bcff; flex: none; }
.aix-kind .i { width: 13px; height: 13px; }
.aix-s[data-k='data'] .aix-kind, .aix-s[data-k='price'] .aix-kind { background: rgba(80, 140, 255, .18); color: #a9c4ff; }
.aix-s[data-k='tool'] .aix-kind { background: rgba(255, 196, 77, .16); color: #ffd47a; }
.aix-s[data-k='ok'] .aix-kind, .aix-s[data-k='back'] .aix-kind { background: rgba(80, 210, 140, .16); color: #7fe3a9; }
.aix-s[data-k='rule'] .aix-kind, .aix-s[data-k='silent'] .aix-kind { background: rgba(255, 255, 255, .1); color: #d6d5e6; }
.aix-s[data-k='handoff'] .aix-kind, .aix-s[data-k='reason'] .aix-kind { background: rgba(255, 140, 120, .16); color: #ffb3a3; }
.aix-s[data-k='tool'] { border-color: rgba(255, 196, 77, .25); }
.aix-s-t { font-size: 14px; font-weight: 600; min-width: 0; }
.aix-s-time { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--night-mut); white-space: nowrap; }
.aix-s-d { margin-top: 4px; font-size: 12.5px; color: var(--night-mut); line-height: 1.45; }
.aix-code { display: block; margin-top: 6px; font: 500 12.5px/1.4 var(--mono); color: #b7f0d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aix-code::before { content: '› '; color: var(--night-mut); }
.aix-code.is-typing::after { content: ''; display: inline-block; width: 7px; height: 13px; margin-left: 2px; vertical-align: -2px; background: #b7f0d0; animation: aix-caret .8s steps(1) infinite; }
@keyframes aix-caret { 50% { opacity: 0; } }
.aix-rows { margin-top: 8px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; font-size: 12.5px; }
.aix-rows dt { color: var(--night-mut); white-space: nowrap; }
.aix-rows dd { margin: 0; color: var(--night-ink); font-variant-numeric: tabular-nums; animation: aix-msg .4s var(--ce) both; animation-delay: calc(var(--k) * .12s); }
.aix-tag { display: inline-flex; margin-top: 8px; height: 22px; align-items: center; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(255, 196, 77, .16); color: #ffd47a; }

/* Управление */
.aix-ctl { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ── Особенности ── */
.aif-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.aif-card { border: 1px solid var(--line-card); border-radius: 18px; background: #fff; overflow: hidden; padding-bottom: 22px; }
.aif-wide { grid-column: span 2; }
.aif-full { grid-column: 1 / -1; }
.aif-card h3 { display: flex; align-items: center; gap: 8px; margin: 20px 22px 6px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.aif-card h3 .i { color: var(--ai); }
.aif-card > p { margin: 0 22px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 640px; }
.aif-vis {
    position: relative; height: 240px; padding: 20px; overflow: hidden; border-bottom: 1px solid var(--line);
    background: radial-gradient(260px 160px at 0% 0%, rgba(139, 116, 238, .16), transparent 70%), radial-gradient(300px 200px at 100% 100%, rgba(47, 91, 216, .10), transparent 70%), #fbfaff;
}
.aif-vis::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(106, 79, 208, .045) 0 1px, transparent 1px 22px); }
.aif .aif-vis *, .aif .aif-vis *::before, .aif .aif-vis *::after { animation-play-state: paused; }
.aif.is-on .aif-vis *, .aif.is-on .aif-vis *::before, .aif.is-on .aif-vis *::after { animation-play-state: running; }

/* языки */
.aif-lang .aif-vis { display: flex; align-items: center; gap: 24px; padding-inline: 28px; }
.aif-lang-st { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.aif-lang-row { display: flex; align-items: center; gap: 12px; animation: aif-lang 9s var(--ce) infinite; animation-delay: calc(var(--k) * 3s); }
@keyframes aif-lang { 0%, 30% { opacity: 1; transform: none; } 36%, 94% { opacity: .38; transform: scale(.97); } 100% { opacity: 1; transform: none; } }
.aif-lang-code { flex: none; width: 38px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 700 12px/1 var(--mono); background: #fff; border: 1px solid #e4def9; color: var(--ai); }
.aif-lang-b { padding: 10px 14px; border-radius: 14px; border-bottom-left-radius: 4px; background: #fff; box-shadow: 0 6px 18px rgba(43, 33, 99, .08); font-size: 14.5px; }
.aif-orbit { position: relative; flex: none; width: 150px; height: 150px; display: grid; place-items: center; }
.aif-orbit > span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: conic-gradient(from 200deg, #6a4fd0, #2f5bd8, #9b7bff, #6a4fd0); box-shadow: 0 10px 30px rgba(106, 79, 208, .35); }
.aif-orbit i { position: absolute; inset: 8px; border-radius: 50%; border: 1.5px dashed rgba(106, 79, 208, .35); animation: aif-spin 14s linear infinite; }
.aif-orbit i + i { inset: 28px; border-style: solid; border-color: rgba(47, 91, 216, .18); animation-duration: 9s; animation-direction: reverse; }
.aif-orbit i::after { content: ''; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--ai); }
.aif-orbit i + i::after { background: var(--accent); }
@keyframes aif-spin { to { transform: rotate(360deg); } }

/* голос, фото */
.aif-media .aif-vis { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.aif-voice { align-self: flex-end; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 14px; border-bottom-right-radius: 4px; background: #d9fdd3; }
.aif-voice > span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: #fff; }
.aif-wv { display: flex; align-items: center; gap: 2px; height: 24px; }
.aif-wv i { width: 3px; height: var(--h); border-radius: 2px; background: #64b07a; animation: aif-wv 1.1s ease-in-out infinite; animation-delay: calc(var(--j) * -.07s); }
@keyframes aif-wv { 50% { transform: scaleY(.4); } }
.aif-voice em { font-style: normal; font-size: 11.5px; color: #4f8e57; }
.aif-vt { align-self: flex-end; max-width: 92%; font-size: 13px; font-style: italic; color: var(--ai-ink); padding: 6px 10px; border-radius: 10px; background: var(--ai-soft); animation: aif-in 6s var(--ce) infinite; }
@keyframes aif-in { 0%, 12% { opacity: 0; transform: translateY(6px); } 20%, 100% { opacity: 1; transform: none; } }
.aif-file { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line-card); overflow: hidden; }
.aif-file > span { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--bad-soft); color: var(--bad); flex: none; }
.aif-file b { display: block; font-size: 13px; }
.aif-file small { display: block; font-size: 12px; color: var(--ai); }
.aif-file-scan { position: absolute; top: 0; bottom: 0; width: 40px; left: -40px; background: linear-gradient(90deg, transparent, rgba(139, 116, 238, .35), transparent); animation: aif-scanx 3s ease-in-out infinite; }
@keyframes aif-scanx { 0%, 30% { left: -40px; } 70%, 100% { left: 100%; } }

/* комментарий */
.aif-note .aif-vis { display: flex; flex-direction: column; gap: 8px; }
.aif-mc { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line-card); font-size: 13px; }
.aif-mc span { color: var(--muted); }
.aif-sticky { position: relative; align-self: flex-start; display: flex; gap: 6px; align-items: flex-start; max-width: 92%; margin: -4px 0 0 16px; padding: 8px 10px; border-radius: 4px 10px 10px 10px; background: #fff3c4; color: #6d5208; font-size: 12.5px; line-height: 1.4; transform: rotate(-1.2deg); box-shadow: 0 4px 10px rgba(109, 82, 8, .12); animation: aif-stick 7s var(--ce) infinite; }
@keyframes aif-stick { 0%, 6% { opacity: 0; transform: rotate(-6deg) translateY(-8px); } 14%, 100% { opacity: 1; transform: rotate(-1.2deg); } }
.aif-qa { display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
.aif-q, .aif-a { max-width: 88%; padding: 6px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; }
.aif-q { align-self: flex-end; background: #d9fdd3; animation: aif-q 7s var(--ce) infinite; }
.aif-a { align-self: flex-start; background: #fff; box-shadow: 0 2px 8px rgba(20, 20, 19, .06); animation: aif-a 7s var(--ce) infinite; }
@keyframes aif-q { 0%, 22% { opacity: 0; transform: translateY(6px); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes aif-a { 0%, 42% { opacity: 0; transform: translateY(6px); } 52%, 100% { opacity: 1; transform: none; } }

/* видео */
.aif-video .aif-vis { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.aif-vrow { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--line-card); animation: aif-vrow 9s var(--ce) infinite; animation-delay: calc(var(--k) * 3s); }
@keyframes aif-vrow { 0%, 4% { border-color: var(--line-card); box-shadow: none; } 8%, 26% { border-color: var(--ai); box-shadow: 0 6px 18px rgba(106, 79, 208, .16); } 33%, 100% { border-color: var(--line-card); box-shadow: none; } }
.aif-thumb { position: relative; width: 52px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 30%, #4d5ad6, #1d2150 70%); flex: none; }
.aif-thumb em { position: absolute; right: 2px; bottom: 1px; font-size: 9px; font-style: normal; opacity: .85; }
.aif-vrow div { min-width: 0; }
.aif-vrow b { display: block; font-size: 13px; }
.aif-vrow small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aif-sent { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ok); white-space: nowrap; opacity: 0; animation: aif-sent 9s var(--ce) infinite; animation-delay: calc(var(--k) * 3s); }
@keyframes aif-sent { 0%, 10% { opacity: 0; transform: translateX(6px); } 14%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; } }

/* рамки */
.aif-rails .aif-vis { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.aif-rail { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line-card); font-size: 13px; animation: aif-rail 10s var(--ce) infinite; animation-delay: calc(var(--k) * 2s); }
.aif-rail > span { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--ai-soft); color: var(--ai); flex: none; }
.aif-rail b { font-weight: 500; min-width: 0; }
.aif-rail > i { margin-left: auto; color: var(--faint); font-style: normal; display: grid; }
@keyframes aif-rail { 0%, 3% { transform: none; } 6% { transform: translateX(4px); border-color: var(--ai); } 9% { transform: translateX(-3px); } 12%, 18% { transform: none; border-color: var(--ai); } 22%, 100% { border-color: var(--line-card); } }

/* база знаний */
.aif-kb .aif-vis { display: flex; align-items: center; gap: 24px; padding-inline: 28px; }
.aif-kb-t { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line-card); border-radius: 12px; overflow: hidden; font-size: 12.5px; }
.aif-kb-h, .aif-kb-r, .aif-kb-f { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px; align-items: center; gap: 8px; padding: 4px 12px; }
.aif-kb-h { font-size: 11.5px; color: var(--muted); background: var(--hover-soft); border-bottom: 1px solid var(--line); }
.aif-kb-h span:not(:first-child), .aif-kb-r i, .aif-kb-f b { justify-self: center; }
.aif-kb-r { border-bottom: 1px solid var(--row); }
.aif-kb-r span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aif-kb-r i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; animation: aif-mark 8s var(--ce) infinite; animation-delay: calc(var(--k) * .35s); }
.aif-kb-r i + i { animation-delay: calc(var(--k) * .35s + .18s); }
.aif-kb-r i.ok { background: var(--ok-soft); color: var(--ok); }
.aif-kb-r i.no { background: var(--bad-soft); color: var(--bad); }
@keyframes aif-mark { 0%, 2% { opacity: 0; transform: scale(.4); } 6%, 100% { opacity: 1; transform: none; } }
.aif-kb-f { font-weight: 600; background: var(--hover-soft); }
.aif-kb-f > span { color: var(--muted); display: flex; }
.aif-kb-f b.is-new { color: var(--ai); }
.aif-kb-v { flex: none; max-width: 210px; display: flex; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 14px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ok); background: var(--ok-soft); border: 1px solid #c9ead5; animation: aif-verdict 8s var(--ce) infinite; }
.aif-kb-v .i { margin-top: 2px; }
@keyframes aif-verdict { 0%, 30% { opacity: 0; transform: scale(.9); } 38%, 100% { opacity: 1; transform: none; } }

/* разбор */
.aif-review .aif-vis { display: flex; flex-direction: column; gap: 6px; }
.aif-rv-row { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line-card); }
.aif-rv-row small { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.aif-rv-row b { font-size: 13px; font-weight: 600; }
.aif-rv-row.is-ai { border-color: #d9d0fb; background: #fdfcff; }
.aif-rv-row.is-ai small { color: var(--ai); }
.aif-fixes { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.aif-fixes li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 2px; }
.aif-fixes li > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aif-st { position: relative; margin-left: auto; display: grid; flex: none; font-style: normal; }
.aif-st i { grid-area: 1 / 1; justify-self: end; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; font-style: normal; display: inline-flex; align-items: center; white-space: nowrap; opacity: 0; }
.aif-st i[data-j='0'] { background: var(--warn-soft); color: var(--warn); }
.aif-st i[data-j='1'] { background: var(--accent-soft); color: var(--accent); }
.aif-st i[data-j='2'] { background: var(--ok-soft); color: var(--ok); }
.aif-st[data-st='0'] i[data-j='0'], .aif-st[data-st='1'] i[data-j='1'], .aif-st[data-st='2'] i[data-j='2'] { opacity: 1; }
.aif.is-on .aif-st i { animation: aif-st 9s steps(1) infinite; }
.aif.is-on .aif-st i[data-j='0'] { animation-name: aif-st0; }
.aif.is-on .aif-st i[data-j='1'] { animation-name: aif-st1; }
.aif.is-on .aif-st i[data-j='2'] { animation-name: aif-st2; }
.aif.is-on .aif-st { --o: 0s; }
.aif.is-on .aif-fixes li:nth-child(2) .aif-st i { animation-delay: -3s; }
.aif.is-on .aif-fixes li:nth-child(3) .aif-st i { animation-delay: -6s; }
@keyframes aif-st0 { 0% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 0; } }
@keyframes aif-st1 { 0% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 0; } 100% { opacity: 0; } }
@keyframes aif-st2 { 0% { opacity: 0; } 66% { opacity: 1; } 100% { opacity: 1; } }

/* качество */
.aif-quality .aif-vis { display: grid; grid-template-columns: 1.3fr 1fr .8fr; gap: 16px; height: 230px; }
.aif-quality .aif-vis > div { position: relative; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line-card); min-width: 0; display: flex; flex-direction: column; }
.aif-quality small { font-size: 12px; color: var(--muted); }
.aif-q-share b { font-size: 34px; font-weight: 600; letter-spacing: -.03em; color: var(--ai); line-height: 1.1; }
.aif-q-share svg { flex: 1; width: 100%; min-height: 0; margin-top: 6px; overflow: visible; }
.aif-q-line { fill: none; stroke: var(--ai); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.aif.is-on .aif-q-line { animation: aif-draw 2.2s var(--ce) both; }
@keyframes aif-draw { from { stroke-dashoffset: 1; } }
.aif-q-area { opacity: 1; }
.aif.is-on .aif-q-area { animation: aif-fade 2.2s ease-out both; }
@keyframes aif-fade { from { opacity: 0; } }
.aif-q-dot { fill: #fff; stroke: var(--ai); stroke-width: 3; vector-effect: non-scaling-stroke; }
.aif.is-on .aif-q-dot { animation: aif-fade .4s 2s both; }
.aif-q-gaps { gap: 10px; }
.aif-q-gaps > div { display: grid; grid-template-columns: minmax(0, 1fr) 30px; grid-template-rows: auto 6px; gap: 3px 8px; font-size: 13px; }
.aif-q-gaps span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aif-q-gaps b { grid-row: 1 / 3; grid-column: 2; align-self: center; text-align: right; font-variant-numeric: tabular-nums; }
.aif-q-gaps > div > i { grid-column: 1; height: 6px; border-radius: 4px; background: var(--row); overflow: hidden; }
.aif-q-gaps > div > i i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #ffb46a, #f08a4b); }
.aif.is-on .aif-q-gaps > div > i i { animation: aif-grow 1.2s var(--ce) both; animation-delay: calc(.3s + var(--k) * .15s); }
@keyframes aif-grow { from { width: 0; } }
.aif-q-bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; }
.aif-q-bars i { position: relative; flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #8fa8f5, var(--accent)); transform-origin: bottom; }
.aif.is-on .aif-q-bars i { animation: aif-bar .9s var(--ce) both; animation-delay: calc(var(--k) * .08s); }
@keyframes aif-bar { from { transform: scaleY(0); } }
.aif-q-bars i em { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font-size: 10.5px; font-style: normal; color: var(--muted); }
.aif-q-cost { padding-bottom: 26px !important; }

/* ── Адаптив ── */
@media (max-width: 1279px) {
    .aix-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aix-stage { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; padding: 20px; }
    .aif-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aif-wide, .aif-full { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .aix-tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding: 2px 20px 6px; scroll-snap-type: x mandatory; }
    .aix-tabs::-webkit-scrollbar { display: none; }
    .aix-tab { flex: none; width: 230px; scroll-snap-align: start; }
    .aix-stage { grid-template-columns: 1fr; padding: 14px; gap: 18px; margin-inline: -8px; border-radius: 18px; }
    .aix-phone { height: 470px; }
    .aix-trace { height: 520px; }
    .aix-tr-who { display: none; }
    .aix-m b { font-size: 15px; }
    .aix-steps { padding-left: 22px; }
    .aix-s-h { flex-wrap: wrap; gap: 6px; }
    .aix-s-time { display: none; }
    .aix-s-t { flex-basis: 100%; }
    .aix-steps::before { left: 6px; }
    .aix-s::before { left: -21px; }
    .aif-grid { grid-template-columns: 1fr; }
    .aif-lang .aif-vis, .aif-kb .aif-vis { padding-inline: 16px; }
    .aif-orbit { display: none; }
    .aif-kb .aif-vis { flex-direction: column; align-items: stretch; gap: 10px; height: auto; }
    .aif-kb-v { max-width: none; padding: 10px 12px; }
    .aif-kb-h, .aif-kb-r, .aif-kb-f { grid-template-columns: minmax(0, 1fr) 58px 58px; padding: 5px 10px; }
    .aif-quality .aif-vis { grid-template-columns: 1fr; height: auto; }
    .aif-q-share svg { height: 90px; flex: none; }
    .aif-q-bars { height: 70px; flex: none; }
    .aix-ctl { justify-content: center; }
}
.aif-vrow:first-child .aif-sent { opacity: 1; }