/* ===== Блок «Путь заявки» (#path): шесть входящих → одна CRM → Telegram владельцу ===== */
#path{overflow-x:clip}
.jr{--jr-paper:#ece8df;--jr-ink:#17161a;--jr-mut:#6d685e;--jr-line:#d9d3c6;--jr-new:#b8762f}

/* заголовок: утверждение слева, пояснение справа внизу */
.jr-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px 72px;align-items:end}
.jr-head .hd{font-size:clamp(30px,3.6vw,52px);line-height:1.06;letter-spacing:-.02em;max-width:760px}
.jr-lead{color:var(--soft);font-size:16.5px;line-height:1.6;max-width:430px;margin:0 0 6px}
.jr-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:30px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--dim)}
.jr-note>span:first-child{color:var(--muted)}
.jr-again{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:8px 14px;border:1px solid var(--line-2);border-radius:99px;background:none;color:var(--ink);font:600 13px/1 var(--font-text);transition:border-color .25s,background .25s}
.jr-again:hover{border-color:var(--soft);background:rgba(255,255,255,.05)}
.jr-again[hidden]{display:none}
.jr-again i{font-size:15px}

/* сцена */
.jr-stage{position:relative;display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start;margin-top:44px}

/* входящие: сообщения в «родном» виде, лежат вразнобой */
.jr-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 16px;align-content:start;align-items:start;padding-bottom:48px}
.jr-m{--r:0deg;position:relative;min-width:0;display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;padding:13px 14px 14px;border:1px solid #29292e;border-radius:14px;background:#141416;color:var(--soft);font:400 13.5px/1.45 var(--font-text);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 28px -16px rgba(0,0,0,.9);transform:rotate(var(--r));transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s,opacity .4s;-webkit-tap-highlight-color:transparent}
.jr-m:nth-child(even){margin-top:48px;margin-bottom:-48px}
.jr-m:nth-child(1){--r:-1.2deg}.jr-m:nth-child(2){--r:.9deg}.jr-m:nth-child(3){--r:.6deg}
.jr-m:nth-child(4){--r:-.8deg}.jr-m:nth-child(5){--r:-.5deg}.jr-m:nth-child(6){--r:1.1deg}
.jr-m:hover,.jr-m.is-link{border-color:#55555c;transform:rotate(0deg) translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 22px 36px -18px #000}
.jr-m.is-go{transform:rotate(0deg) translateY(-8px) scale(1.02);border-color:var(--amber);box-shadow:0 30px 44px -22px #000}
.jr-m:focus-visible{outline:2px solid #dce4ba;outline-offset:3px}
.jr-wa{background:#121815;border-color:#25302a}
.jr-tg{background:#111821;border-color:#223040}
.jr-vk{background:#13161c;border-color:#262c37}

.jr-m-h{display:flex;align-items:center;gap:7px;font-size:12.5px;line-height:1.2;color:var(--muted);min-width:0}
.jr-m-h i{font-size:15px;color:var(--soft)}
.jr-m-h b{font-weight:600;color:var(--ink);white-space:nowrap;flex:none}
.jr-m-h em{font-style:normal;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.jr-m-h time{flex:none;margin-left:auto;color:var(--dim);font-variant-numeric:tabular-nums}
.jr-vk-i{font:800 9px/1 var(--font-text)!important;font-style:normal;color:#141416!important;background:var(--soft);border-radius:4px;padding:3px 3px}
.jr-m-org{font-size:12px;color:var(--dim);line-height:1.35}
.jr-m-q{display:block;padding:9px 11px;border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.055);color:#dedde2}
.jr-m-q small{display:block;margin-top:3px;font-size:12px;color:var(--dim)}
.jr-wa .jr-m-q{background:#1d2a23}.jr-vk .jr-m-q{background:#1d2330}
.jr-m-kv{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:12.5px;color:#dedde2}
.jr-m-kv>span{color:var(--dim)}
.jr-m-who{font-size:12.5px;color:var(--muted)}
.jr-m-sr{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:99px;background:#1d1d21;border:1px solid #2e2e33;color:#e6e5ea;font-size:13px}
.jr-m-sr i{font-size:14px;color:var(--dim)}
.jr-m-chat{display:grid;gap:5px;font-size:12.5px;line-height:1.35}
.jr-m-chat span{max-width:88%;padding:6px 10px;border-radius:11px}
.jr-m-chat .me{justify-self:end;background:#2b5278;color:#eef4fb;border-bottom-right-radius:4px}
.jr-m-chat .bot{justify-self:start;background:#1e2a37;color:#cfd9e4;border-bottom-left-radius:4px}

/* отметка «принято»: появляется, когда сайт или бот ответил */
.jr-m-ok{display:flex;align-items:center;gap:6px;height:0;margin-top:-8px;overflow:hidden;opacity:0;font-size:12px;font-weight:600;color:var(--sage);transition:height .45s cubic-bezier(.2,.8,.2,1),margin .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.jr-m-ok i{font-size:13px}
.jr-m.is-done .jr-m-ok{height:18px;margin-top:0;opacity:1}
.jr-m.is-done:not(:hover):not(.is-link):not(:focus-visible){opacity:.62}

/* CRM: светлое окно программы, как настоящая рабочая таблица */
.jr-out{position:relative;padding-bottom:70px}
.jr-crm{position:relative;background:var(--jr-paper);color:var(--jr-ink);border-radius:10px;padding:0 0 10px;box-shadow:0 1px 2px rgba(0,0,0,.5),0 18px 40px -14px rgba(0,0,0,.7),0 60px 90px -40px rgba(0,0,0,.8);font:400 14px/1.4 var(--font-text)}
.jr-crm-top{display:flex;align-items:center;gap:10px;padding:16px 20px 14px;border-bottom:1px solid var(--jr-line)}
.jr-crm-top>b{font:400 19px/1 var(--font-display);letter-spacing:-.01em}
.jr-tag{font-size:11px;font-weight:600;color:var(--jr-mut);border:1px solid var(--jr-line);border-radius:99px;padding:3px 8px}
.jr-sum{margin-left:auto;font-size:13.5px;color:var(--jr-mut);white-space:nowrap}
.jr-sum b{color:var(--jr-ink);font-weight:700;font-variant-numeric:tabular-nums}
.jr-cols,.jr-rows li{display:grid;grid-template-columns:52px minmax(0,1fr) 128px 104px;gap:14px;align-items:center;padding:0 20px}
.jr-cols{padding-top:10px;padding-bottom:8px;font-size:11.5px;font-weight:600;color:var(--jr-mut)}
.jr-cols span:last-child,.jr-a{text-align:right}
.jr-grp{margin:6px 20px 0;padding:8px 0 6px;font-size:12px;font-weight:700;color:var(--jr-mut);border-top:1px solid var(--jr-line)}
.jr-rows{list-style:none;margin:0;padding:0;position:relative}
#jrRows{min-height:calc(6 * 54px)}
.jr-rows li{height:54px;position:relative;border-radius:6px;transition:background .6s,opacity .4s}
.jr-rows li+li::before{content:"";position:absolute;left:20px;right:20px;top:0;height:1px;background:rgba(0,0,0,.06)}
.jr-rows time{font-variant-numeric:tabular-nums;color:var(--jr-mut);font-size:13px}
.jr-c{display:flex;flex-direction:column;min-width:0}
.jr-c b{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
.jr-c small{font-size:12.5px;color:var(--jr-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-s{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#3d3a34;white-space:nowrap;min-width:0}
.jr-s i{font-size:14px;color:var(--jr-mut)}
.jr-s .jr-vk-i{background:#3d3a34;color:var(--jr-paper)!important}
.jr-a{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.jr-a.na{font-weight:500;color:var(--jr-mut);font-size:12.5px}
.jr-new{font-size:10.5px;font-weight:700;color:#fff;background:var(--jr-new);border-radius:4px;padding:2px 6px;letter-spacing:.02em;transition:opacity .5s}
.jr-rows li.is-fresh{background:#f6dfc1}
.jr-rows li.is-link{background:#e1dbcf}
.jr-old li{opacity:.7}

/* летящая заявка: карточка-конверт от сообщения к строке CRM */
.jr-fly{position:absolute;z-index:6;left:0;top:0;display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:9px;background:var(--jr-paper);color:var(--jr-ink);font:700 13px/1.2 var(--font-text);white-space:nowrap;box-shadow:0 18px 30px -12px rgba(0,0,0,.85);pointer-events:none;will-change:transform}
.jr-fly i{font-size:14px;color:var(--jr-mut)}
.jr-fly small{font-weight:500;color:var(--jr-mut)}

/* телефон владельца: Telegram, лежит поверх угла CRM */
.jr-ph{position:absolute;right:-36px;bottom:0;z-index:3;width:272px;padding:12px 12px 14px;border-radius:26px;background:#0e1621;border:1px solid #2a3442;box-shadow:0 0 0 5px #1a1a1d,0 0 0 6px #33333a,0 30px 50px -18px #000,0 60px 80px -40px #000;transform:rotate(-2deg);color:#e6edf5}
.jr-ph-top{display:flex;align-items:center;gap:8px;padding:2px 6px 10px;border-bottom:1px solid #1f2a37;font-size:13px}
.jr-ph-top i{font-size:16px;color:#8fb3e8}
.jr-ph-top b{font-weight:700}
.jr-ph-top small{margin-left:auto;font-size:11px;color:#6d7f93}
.jr-ph-feed{display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding-top:10px}
.jr-tm{flex:none;padding:8px 11px 7px;border-radius:12px 12px 12px 4px;background:#182533;font-size:12.5px;line-height:1.4;color:#c9d6e3}
.jr-tm b{display:block;color:#fff;font-weight:700}
.jr-tm span{display:block}
.jr-tm small{display:flex;justify-content:space-between;gap:8px;margin-top:2px;color:#7f93a8;font-size:11.5px}
.jr-tm.is-old{opacity:.55}
.jr-tm.is-in{animation:jrIn .5s cubic-bezier(.2,.9,.3,1.15)}
@keyframes jrIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.jr-ph.is-ping{animation:jrPing .5s cubic-bezier(.2,.8,.2,1)}
@keyframes jrPing{0%{transform:rotate(-2deg)}35%{transform:rotate(-2deg) translateY(-6px)}100%{transform:rotate(-2deg)}}

/* ширина 1000–1200: колонки уже */
@media (max-width:1200px){
  .jr-stage{grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:40px}
  .jr-cols,.jr-rows li{grid-template-columns:46px minmax(0,1fr) 108px 92px;gap:10px}
  .jr-ph{right:-12px}
}
/* планшет и телефон: сообщения листаются лентой, CRM и телефон ниже */
@media (max-width:980px){
  .jr-head{grid-template-columns:1fr;gap:18px}
  .jr-stage{grid-template-columns:1fr;gap:28px;margin-top:28px}
  .jr-in{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--g) * -1);padding:10px var(--g) 18px;scroll-padding:0 var(--g);scrollbar-width:none;align-items:flex-start}
  .jr-in::-webkit-scrollbar{display:none}
  .jr-m{flex:0 0 min(300px,80%);scroll-snap-align:start}
  .jr-m:nth-child(even){margin:0}
  .jr-ph{right:-8px}
}
@media (max-width:640px){
  .jr-note{margin-top:22px}
  .jr-again{margin-left:0}
  .jr-crm-top{flex-wrap:wrap;padding:14px 16px 12px;row-gap:6px}
  .jr-sum{margin-left:0;width:100%}
  .jr-cols{display:none}
  .jr-rows li{grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:0 10px;height:62px;padding:0 16px}
  #jrRows{min-height:calc(6 * 62px)}
  .jr-rows li time{grid-row:1/3;align-self:start;padding-top:12px;font-size:12px}
  .jr-c{grid-column:2;grid-row:1/3}
  .jr-s{grid-column:3;grid-row:2;justify-content:flex-end;font-size:11.5px}
  .jr-a{grid-column:3;grid-row:1;align-self:end}
  .jr-grp{margin:4px 16px 0}
  .jr-rows li+li::before{left:16px;right:16px}
  .jr-out{padding-bottom:0}
  .jr-ph{position:relative;right:auto;bottom:auto;width:auto;max-width:300px;margin:-56px 6px 0 auto}
}

@media (prefers-reduced-motion:reduce){
  .jr-m,.jr-m-ok,.jr-rows li{transition:none}
  .jr-tm.is-in,.jr-ph.is-ping{animation:none}
}