/* /uslugi/ai/ — демо «ИИ-ассистент ↔ 1С». Всё под корнем .aid (паттерн docs/embeds.md):
   — без служебных классов бутстрапа (show/active/open/row/col/btn) — только is-* и aid-*;
   — «таблицы» на CSS-grid из div; шрифт системный («шрифт 1С»); keyframes с префиксом aid.
   Окно 1С — те же токены, что в ns/include/servicedesk-live-embed.php, чтобы оба демо выглядели одной системой. */
.aid{--ink:#1d1f27;--muted:#6b7178;--line:#eceae5;--y:#ffd200;--y2:#ffdd2d;--r1c:#c1121f;--ok:#1f9d57;--read:#fff3b8;--ease:cubic-bezier(.22,.61,.36,1);font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:#222;line-height:normal}
.aid *{box-sizing:border-box}
.aid svg{display:block}
.aid h3,.aid p,.aid button{font-family:inherit;letter-spacing:normal}
.aid .aid-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:20px;align-items:stretch}

/* ── ЧАТ ─────────────────────────────────────────────────────────────── */
.aid .aid-chat{background:#fff;border:1px solid #efeeea;border-radius:20px;box-shadow:0 40px 90px -40px rgba(28,30,58,.42);display:flex;flex-direction:column;height:580px;overflow:hidden}
.aid .aid-chat__head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #f0efeb}
.aid .aid-ava{width:38px;height:38px;border-radius:12px;background:#141821;display:grid;place-items:center;flex:0 0 auto}
.aid .aid-ava svg{width:21px;height:21px;fill:none;stroke:var(--y);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aid .aid-chat__name{font-weight:700;font-size:14.5px;color:#1c1c1c}
.aid .aid-chat__sub{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:2px}
.aid .aid-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.aid .aid-msgs{flex:1;overflow-y:auto;padding:16px 16px 10px;display:flex;flex-direction:column;gap:9px;scrollbar-width:none}
.aid .aid-msgs::-webkit-scrollbar{display:none}
.aid .aid-m{max-width:90%;padding:10px 13px;border-radius:15px;font-size:13.5px;line-height:1.45;animation:aidPop .32s var(--ease) both}
.aid .aid-m--me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px}
.aid .aid-m--ai{align-self:flex-start;background:#f3f4f6;color:#1c1c1c;border-bottom-left-radius:5px}
.aid .aid-m b{font-weight:700}
.aid .aid-step{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#5b6169;background:#fff;border:1px solid #ecebe7;border-radius:20px;padding:6px 12px 6px 9px;animation:aidPop .3s var(--ease) both;max-width:92%}
.aid .aid-step i{width:14px;height:14px;border-radius:50%;border:2px solid #d6d5d0;border-top-color:var(--ink);animation:aidSpin .8s linear infinite;flex:0 0 auto}
.aid .aid-step.is-done{color:#2b2f36}
.aid .aid-step.is-done i{animation:none;border:0;background:var(--ok) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/9px no-repeat}
.aid .aid-typing{align-self:flex-start;display:inline-flex;gap:4px;background:#f3f4f6;border-radius:15px;border-bottom-left-radius:5px;padding:12px 14px;animation:aidPop .3s var(--ease) both}
.aid .aid-typing i{width:6px;height:6px;border-radius:50%;background:#a3a7ad;animation:aidDot 1.2s infinite}
.aid .aid-typing i:nth-child(2){animation-delay:.15s}
.aid .aid-typing i:nth-child(3){animation-delay:.3s}

/* мини-таблица в ответе ИИ */
.aid .aid-t{margin-top:8px;border:1px solid #e6e5e1;border-radius:10px;overflow:hidden;background:#fff;font-size:12.5px}
.aid .aid-tr{display:grid;grid-template-columns:var(--cols,1fr 1fr);gap:8px;padding:7px 10px;border-top:1px solid #f0efeb;align-items:center}
.aid .aid-tr:first-child{border-top:0;background:#fafaf9;color:#7a7f86;font-weight:600;font-size:11.5px}
.aid .aid-tr span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aid .aid-tr:first-child span{white-space:normal;line-height:1.25}
.aid .aid-tr .num{text-align:right;font-variant-numeric:tabular-nums}
.aid .aid-note{margin-top:7px}
.aid .aid-rights{margin-top:8px;font-size:11.5px;color:#8a8f96;display:flex;align-items:center;gap:6px}
.aid .aid-rights svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.aid .aid-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.aid .aid-b{font:inherit;font-size:13px;font-weight:600;border-radius:20px;padding:8px 15px;border:1px solid #d9d8d4;background:#fff;color:#1c1c1c;position:relative;overflow:hidden;transition:transform .12s var(--ease)}
.aid .aid-b--go{background:var(--ink);border-color:var(--ink);color:#fff}
.aid .aid-b.is-press{transform:scale(.94)}

/* поле ввода */
.aid .aid-in{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid #f0efeb}
.aid .aid-in__f{flex:1;min-width:0;min-height:42px;background:#f6f6f4;border-radius:21px;padding:11px 16px;font-size:13.5px;color:#1c1c1c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aid .aid-in__f.is-empty{color:#a0a4aa}
.aid .aid-caret{display:inline-block;width:2px;height:15px;background:var(--ink);vertical-align:-3px;margin-left:1px;animation:aidBlink 1s steps(1) infinite}
.aid .aid-send{width:42px;height:42px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex:0 0 auto;transition:transform .12s var(--ease)}
.aid .aid-send svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aid .aid-send.is-press{transform:scale(.88)}

/* ── ОКНО 1С ─────────────────────────────────────────────────────────── */
.aid .emb{position:relative;background:#f6f6f4;border:1px solid #ecebe6;border-radius:18px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(28,30,58,.42);height:580px;display:flex;flex-direction:column;user-select:none}
.aid .emb__title{display:flex;align-items:center;gap:12px;background:#f8f7f5;padding:11px 16px;border-bottom:1px solid #eae9e5;font-size:13px;color:#3a3a3a;white-space:nowrap}
.aid .emb__logo{width:26px;height:26px;border-radius:8px;background:var(--y);color:var(--r1c);display:grid;place-items:center;font-weight:800;font-size:11.5px;flex:0 0 auto}
.aid .emb__app{min-width:0;overflow:hidden;text-overflow:ellipsis}
.aid .emb__user{margin-left:auto;display:flex;align-items:center;gap:7px;color:#5a5a56;font-size:12.5px}
.aid .emb__user svg{width:16px;height:16px;fill:none;stroke:#8a8a86;stroke-width:1.8}
.aid .emb__tabs{display:flex;gap:5px;background:#efeee9;padding:8px 12px 0;overflow:hidden}
.aid .emb__tab{background:#e2e1dc;color:#5a5a56;font-size:12.5px;padding:9px 15px;border-radius:10px 10px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;transition:background .2s,color .2s,opacity .3s}
.aid .emb__tab.is-active{background:#fff;color:#1c1c1c;font-weight:600}
.aid .emb__body{display:flex;flex:1;min-height:0}
.aid .emb__aside{flex:0 0 158px;background:linear-gradient(180deg,#fdf7e1,#fcf1cc);border-right:1px solid #eeddab;padding:12px 8px;font-size:12.5px;display:flex;flex-direction:column;gap:3px}
.aid .emb__mi{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;color:#5a5330;white-space:nowrap;transition:background .2s,color .2s}
.aid .emb__mi svg{width:17px;height:17px;flex:0 0 auto;stroke:#b3923c;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.aid .emb__mi.is-active{background:rgba(255,255,255,.85);color:#1b1b1b;font-weight:600}
.aid .emb__rs{margin-top:auto;background:rgba(255,255,255,.6);color:#1b1b1b;font-weight:700}
.aid .emb__rs .rs{width:19px;height:19px;flex:0 0 auto;border-radius:6px;background:#141821;display:grid;place-items:center}
.aid .emb__rs .rs svg{width:12px;height:12px;stroke:var(--y);fill:none;stroke-width:2}
.aid .emb__main{position:relative;flex:1;min-width:0;background:#fff;overflow:hidden}

/* экраны 1С */
.aid .aid-scr{position:absolute;inset:0;padding:14px 16px;overflow:hidden;opacity:0;transform:translateY(8px);pointer-events:none}
.aid .aid-scr.is-on{opacity:1;transform:none;transition:opacity .34s var(--ease),transform .34s var(--ease)}
.aid .aid-dh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.aid .aid-nav{display:flex;gap:5px}
.aid .aid-nav i{width:30px;height:30px;border-radius:8px;background:#f2f1ee;color:#7b7b77;display:grid;place-items:center}
.aid .aid-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aid .aid-dh h3{font-size:15.5px;margin:0;color:#1c1c1c;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aid .aid-tb{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.aid .aid-1b{font-size:12.5px;border:1px solid #e6e5e1;background:#fafaf9;border-radius:9px;padding:7px 12px;color:#3a3a3a;white-space:nowrap}
.aid .aid-1b--y{background:var(--y2);border-color:#eecb1f;color:#1c1c1c;font-weight:600}
.aid .aid-flt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:11px}
.aid .aid-fld{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#7a7f86}
.aid .aid-fld b{font-weight:400;min-height:30px;border:1px solid #e3e2de;border-radius:8px;padding:6px 10px;font-size:12.5px;color:#1c1c1c;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .2s,box-shadow .2s}
.aid .aid-fld b.is-focus{border-color:#e9c400;box-shadow:0 0 0 3px rgba(255,210,0,.28)}

/* список 1С */
.aid .aid-g{border:1px solid #ecebe7;border-radius:11px;overflow:hidden;font-size:12.5px}
.aid .aid-r{display:grid;grid-template-columns:var(--cols,1fr 1fr);gap:10px;padding:8px 12px;border-top:1px solid #f1f0ec;align-items:center;position:relative;transition:background .35s,opacity .35s}
.aid .aid-r:first-child{border-top:0;background:#fafaf9;color:#7a7f86;font-size:11.5px;font-weight:600}
.aid .aid-r span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aid .aid-r:first-child span{white-space:normal;line-height:1.25}
.aid .aid-r .num{text-align:right;font-variant-numeric:tabular-nums}
.aid .aid-r.is-dim{opacity:.28}
.aid .aid-r.is-read{background:var(--read)}
.aid .aid-r.is-read::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#e9c400}
.aid .aid-tot{display:flex;justify-content:flex-end;gap:14px;font-size:12.5px;padding:9px 12px 0;color:#5a5a56}
.aid .aid-tot b{color:#1c1c1c}
.aid .aid-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;background:#f0efeb;color:#5a5a56;max-width:100%}
.aid .aid-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.aid .aid-pill--ok{background:rgba(31,157,87,.12);color:#177a43}
.aid .aid-pill--wait{background:rgba(233,196,0,.18);color:#8a6d00}
.aid .aid-pill--draft{background:rgba(233,196,0,.18);color:#8a6d00}

/* бейдж «ИИ читает» поверх окна 1С */
.aid .aid-reading{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;align-items:center;gap:8px;background:#141821;color:#fff;font-size:12px;padding:8px 13px;border-radius:20px;opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease);max-width:calc(100% - 28px)}
.aid .aid-reading.is-shown{opacity:1;transform:none}
.aid .aid-reading i{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:var(--y);animation:aidSpin .8s linear infinite;flex:0 0 auto}
.aid .aid-reading span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* сценарии-вкладки под окнами */
.aid .aid-scn{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.aid .aid-scn button{font:inherit;font-size:13.5px;font-weight:600;border:1px solid #e3e2de;background:#fff;color:#3a3a3a;border-radius:22px;padding:9px 16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.aid .aid-scn button:hover{border-color:#c9c8c3}
.aid .aid-scn button.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.aid .aid-cap{text-align:center;color:var(--muted);font-size:13px;margin-top:12px}

@keyframes aidPop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes aidSpin{to{transform:rotate(360deg)}}
@keyframes aidBlink{50%{opacity:0}}
@keyframes aidDot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}

/* узко — панель разделов только иконками (так её можно настроить и в самой 1С) */
@media (max-width:1130px){
  .aid .emb__aside{flex-basis:54px;padding:12px 7px}
  .aid .emb__mi{font-size:0;gap:0;justify-content:center;padding:9px 0}
}
@media (max-width:1000px){
  .aid .aid-grid{grid-template-columns:1fr}
  .aid .aid-chat{height:500px}
  .aid .emb{height:470px}
}
@media (max-width:640px){
  .aid .emb__aside{display:none}
  .aid .emb__app{display:none}
  .aid .aid-chat{height:450px}
  .aid .emb{height:480px}
  .aid .aid-scr{padding:12px}
  .aid .aid-dh{margin-bottom:9px}
  .aid .aid-nav i{width:26px;height:26px}
  .aid .aid-dh h3{font-size:14.5px}
  .aid .aid-tb{gap:5px;margin-bottom:9px}
  .aid .aid-1b{font-size:11.5px;padding:5px 9px}
  .aid .aid-flt{margin-bottom:9px}
  .aid .aid-g{font-size:12px}
  .aid .aid-r{gap:8px;padding:7px 10px}
  .aid .aid-r,.aid .aid-tr{grid-template-columns:var(--cols-m,var(--cols,1fr 1fr))}
  .aid .is-mh{display:none}
  .aid .aid-m--ai{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .aid *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}