/* ROPilot · цвета продукта (из v1) и оформление результата: волна звонка с разметкой агента, цитата, балл и вердикт. */
:root {
  --brand: #3f3dbc; --brand-2: #4b48d1; --brand-ink: #2d2b8f; --brand-soft: #eeeefc; --brand-line: #d6d5f5;
  --accent: #22b8cf; --accent-soft: #e1f6f9; --accent-ink: #0b6b7a;
  --rp-m: #4b48d1;   /* голос менеджера */
  --rp-c: #22b8cf;   /* голос клиента */
}
.rp { display: flex; flex-direction: column; gap: 11px; }
/* цвета разметки: зелёная (здесь продал), жёлтая (риск), красная (здесь потеряли) */
.t-g { --mc: #16a34a; --mb: #15803d; --mt: #fff; --ms: rgba(22, 163, 74, .13); }
.t-y { --mc: #e5a50a; --mb: #f4b41a; --mt: #3d2b00; --ms: rgba(229, 165, 10, .17); }
.t-r { --mc: #d23c3c; --mb: #cc3434; --mt: #fff; --ms: rgba(210, 60, 60, .13); }
.s-g, .v-g { --sc: #15803d; }
.s-w, .v-w { --sc: #c46a00; }
.s-b, .v-b { --sc: #c62828; }

/* что агент понял из разговора */
.rp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 31px; }
.rp-chips-l { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.rp-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 8px; font-size: 14px; font-weight: 600; white-space: nowrap;
  background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-line); }
.rp-chip.w { background: #fdf3dc; color: #7a5200; border-color: #f0d596; }
.rp-chip.g { background: var(--good-soft); color: var(--good-ink); border-color: #bfe4cb; }

/* дорожка: волна звонка или сообщения переписки по времени */
.rp-wave { position: relative; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 11px 14px 9px; }
.rp-wh { display: flex; align-items: center; gap: 18px; font-size: 13.5px; color: var(--ink-2); font-weight: 600; min-height: 20px; }
.rp-lg { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.rp-lg i { width: 16px; height: 8px; border-radius: 4px; background: var(--rp-m); }
.rp-lg.c i { background: var(--rp-c); }
.rp-wm { margin-left: auto; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-tabs { position: relative; height: 26px; margin-top: 7px; }
.rp-tw { position: absolute; bottom: 0; white-space: nowrap; z-index: 3; }
.rp-tw.rt { transform: translateX(calc(-100% + 2px)); }
.rp-tw.off { display: none; }
.rp-tw.cmp .lb { display: none; }
.rp-tab { display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 9px; border-radius: 7px 7px 7px 0; background: var(--mb); color: var(--mt);
  font-size: 13.5px; font-weight: 650; }
.rp-tw.rt .rp-tab { border-radius: 7px 7px 0 7px; }
.rp-tab b { font-weight: 800; font-variant-numeric: tabular-nums; }
.rp-tab.ping { animation: rp-ping 1.25s ease-out 3; }
@keyframes rp-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mb) 60%, transparent); } 100% { box-shadow: 0 0 0 13px transparent; } }

.rp-plot { position: relative; height: 96px; }
.rp-bars { position: absolute; inset: 0; }
.rp-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rp-svg path { fill: none; stroke-linecap: round; }
.rp-svg .m { stroke: var(--rp-m); stroke-width: 2.7; }
.rp-svg .c { stroke: var(--rp-c); stroke-width: 2.7; }
.rp-svg .q { stroke: #ccd4d1; stroke-width: 2.7; }
.rp-svg .rp-mid { stroke: #e2e7e5; stroke-width: 1; }
.rp-svg .rp-grid { stroke: #edf0ef; stroke-width: 1; stroke-dasharray: 3 4; }
.rp-box { position: absolute; top: 0; bottom: 0; border: 2px solid var(--mc); background: var(--ms); border-radius: 0 7px 7px 7px; z-index: 1; }
.rp-box.ping { animation: rp-glow 1.25s ease-out 3; }
@keyframes rp-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mc) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.rp-pin { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--mc); z-index: 1; }
.rp-qm { border: 2px dashed #c0413d; background: rgba(210, 60, 60, .05); border-radius: 7px; }
.rp-qm .rp-qi { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); box-shadow: 0 0 0 2px #fff; }
.rp-qo .rp-qi { position: absolute; right: -10px; top: -10px; box-shadow: 0 0 0 2px #fff; }
.rp-head { position: absolute; top: -29px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); opacity: 0; pointer-events: none; z-index: 4; }
.rp-head.on { opacity: 1; }
.rp-head b { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 7px; background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-ax { position: relative; height: 18px; margin-top: 6px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-ax span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.rp-ax span.l { transform: none; }
.rp-ax span.r { transform: translateX(-100%); }
.rp-ml { display: none; flex-direction: column; gap: 5px; margin-top: 10px; }
.rp-li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.rp-li i { flex: none; width: 11px; height: 11px; border-radius: 3px; background: var(--mc); }
.rp-li b { font-variant-numeric: tabular-nums; }

/* переписка на дорожке: клиент сверху, менеджер снизу */
.rp-cp { background: linear-gradient(transparent 47.5px, #e2e7e5 47.5px, #e2e7e5 48.5px, transparent 48.5px); }
.rp-bw { position: absolute; white-space: nowrap; z-index: 2; }
.rp-bw.c { top: 8px; }
.rp-bw.m { top: 57px; }
.rp-bw.rt { transform: translateX(-100%); }
.rp-mb { display: inline-flex; align-items: center; height: 31px; padding: 0 12px; border-radius: 11px 11px 11px 3px; font-size: 14px; font-weight: 600;
  max-width: 300px; overflow: hidden; text-overflow: ellipsis; background: #e5f7fa; color: #0a5d6a; border: 1.5px solid #98dbe5; }
.rp-bw.rt .rp-mb { border-radius: 11px 11px 3px 11px; }
.rp-bw.m .rp-mb { background: var(--brand-soft); color: var(--brand-ink); border-color: #bebcf0; }
.rp-bw.m .rp-mb.rp-ghost { background: rgba(255, 255, 255, .85); color: var(--good-ink); border: 1.5px dashed #16a34a; }
.rp-qo { position: absolute; inset: -5px; border: 2px dashed var(--mc); border-radius: 15px; pointer-events: none; }
.rp-wait { position: absolute; top: 0; bottom: 0; border: 2px solid #d23c3c; background: rgba(210, 60, 60, .08); border-radius: 0 7px 7px 7px; z-index: 1; }
.rp-wlw { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.rp-wl { display: flex; flex-direction: column; align-items: center; color: #b42323; white-space: nowrap; }
.rp-wl b { font-size: 25px; font-weight: 800; letter-spacing: -.015em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.rp-wl small { font-size: 13px; font-weight: 650; }

/* цитата менеджера и как можно было сказать */
.rp-low { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.rp-qt { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 11px 14px 12px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rp-qh { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); white-space: nowrap; min-width: 0; }
.rp-qh b { color: var(--ink); font-weight: 650; }
.rp-qh .cx { overflow: hidden; text-overflow: ellipsis; }
.rp-qi { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #25302c; }
.rp-qi svg { width: 13px; height: 13px; fill: #fff; }
.rp-tc { padding: 2px 7px; border-radius: 6px; background: var(--mb); color: var(--mt); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.rp-say { margin: 3px 0 0; padding: 1px 0 1px 11px; border-left: 3px solid var(--mc); font-size: 15px; line-height: 1.42; color: var(--ink); text-wrap: pretty; }
.rp-bl { margin-top: 4px; font-size: 12px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--good-ink); }
.rp-bt { position: relative; margin: 0; padding: 1px 0 1px 11px; border-left: 3px solid var(--good); font-size: 15px; line-height: 1.42; color: var(--ink); }
.rp-bt .gh { visibility: hidden; }
.rp-bt .tx { position: absolute; left: 11px; right: 0; top: 1px; }
.rp-qt.keep .rp-bl { color: var(--brand-ink); }
.rp-qt.keep .rp-bt { border-left-color: var(--brand); }

/* балл по чек-листу и вердикт */
.rp-sc { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 11px 14px 12px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.rp-st { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.rp-score { display: flex; align-items: center; gap: 9px; color: var(--sc); }
.rp-num { font-size: 46px; font-weight: 800; letter-spacing: -.035em; line-height: .95; font-variant-numeric: tabular-nums; }
.rp-of { display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; color: var(--muted); font-weight: 600; white-space: nowrap; }
.rp-of b { color: var(--ink-2); font-size: 15px; font-weight: 700; }
.rp-stamp { --rot: -5deg; flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 13px; margin-right: 4px; border: 3px solid var(--sc);
  border-radius: 10px; color: var(--sc); background: rgba(255, 255, 255, .94); text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sc) 20%, transparent); }
.rp-stamp b { font-size: 14px; letter-spacing: .06em; font-weight: 850; }
.rp-stamp span { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.rp-ck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 6px 12px; }
.rp-ci { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); white-space: nowrap; min-width: 0; }
.rp-ci > span { overflow: hidden; text-overflow: ellipsis; }
.rp-ci i { flex: none; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--good); }
.rp-ci.no i { background: var(--bad); }
.rp-ci.no { color: var(--ink-2); }
.rp-ci svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* расшифровка слева: строки с секундой, кто говорит, цвет отметки */
.rp-trc { min-width: 260px; display: flex; flex-direction: column; gap: 7px; }
.rp-trc-h { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rp-trl { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.38; color: var(--ink); }
.rp-trl .tm { flex: none; margin-top: 1px; padding: 1px 6px; border-radius: 6px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--line-2); color: var(--ink-2); }
.rp-trl .tm[class*="t-"] { background: var(--mb); color: var(--mt); }
.rp-trl b { font-weight: 700; }
.rp-trl b.m { color: var(--brand); }
.rp-trl b.c { color: var(--accent-ink); }

/* разбор в Telegram руководителя и сообщения менеджера в переписке */
.rp-rc { min-width: 250px; display: flex; flex-direction: column; gap: 5px; }
.rp-rc-h { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rp-rc-s { display: flex; align-items: baseline; gap: 7px; font-size: 14px; color: var(--ink-2); }
.rp-rc-s b { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--sc); }
.rp-rc-t { font-size: 14px; line-height: 1.42; color: var(--ink); }
.rp-kb { display: flex; flex-direction: column; gap: 5px; margin-top: 3px; }
.rp-kb span { padding: 7px 10px; border-radius: 9px; text-align: center; font-size: 14px; font-weight: 650; background: var(--brand-soft); color: var(--brand-ink); }
.rp-kb span.go { background: var(--brand); color: #fff; }
.rp-kb span.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
.w-msg.out .w-b.rp-mgr { background: var(--brand-soft); color: var(--ink); border: 1px solid var(--brand-line); }

@container (max-width: 700px) {
  .rp-tabs, .rp-head b { display: none; }
  .rp-ml { display: flex; }
  .rp-ax span:nth-child(even) { display: none; }
  .rp-low { grid-template-columns: minmax(0, 1fr); }
  .rp-wh { flex-wrap: wrap; gap: 4px 14px; }
  .rp-wm { margin-left: 0; }
  .rp-mb { font-size: 0; width: 14px; height: 14px; padding: 0; border-radius: 50% !important; }
  .rp-qo { inset: -4px; border-radius: 50%; }
  .rp-qo .rp-qi, .rp-qm .rp-qi { display: none; }
  .rp-wl b { font-size: 20px; }
  .rp-qh { flex-wrap: wrap; white-space: normal; }
  .rp-st { flex-wrap: wrap; justify-content: flex-start; gap: 12px 18px; }
  .rp-stamp { margin: 0 0 2px 6px; }
  .rp-ck { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}