/* Pisar · цвета продукта и оформление результата: три листа в форме компании, у каждого поля метка источника.
   Лист A4 масштабируется как страница: всё внутри него в cqw от ширины листа (276 px на экране 1440 = 100cqw). */
:root {
  --brand: #5a4e6e; --brand-2: #6c5c88; --brand-ink: #443a55; --brand-soft: #f0edf5; --brand-line: #dcd5e8;
  --accent: #8ecae6; --accent-soft: #e5f3fa; --accent-ink: #1e5a74;
  --ps-serif: "Times New Roman", "Liberation Serif", Times, "DejaVu Serif", serif;
  --ps-co: #2f6f8f;      /* цвет компании-клиента на бланке */
  --ps-stamp: #5b3fa0;   /* фиолетовые чернила печати */
  --ps-v: #7656c0; --ps-v-soft: #f2edfb; --ps-v-line: #ddd1f3; --ps-v-ink: #4c3590;
}

/* цвета источников: голос и ответ, базы (ЕГРЮЛ, 1С), счётчик номеров, расчёт, документы компании */
.ps-sv { --sc: var(--ps-v); --sc-soft: var(--ps-v-soft); }
.ps-se { --sc: #1c9a52; --sc-soft: #e6f6ec; }
.ps-sn { --sc: #2a8bbd; --sc-soft: #e3f1f9; }
.ps-sc { --sc: #d98b00; --sc-soft: #fff3d6; }
.ps-sp { --sc: #66748a; --sc-soft: #eef1f5; }

.ps { display: flex; flex-direction: column; gap: 12px; }

/* что агент понял из фразы */
.ps-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 31px; }
.ps-chips-l { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.ps-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 8px; font-size: 14px; font-weight: 600; white-space: nowrap;
  background: var(--ps-v-soft); color: var(--ps-v-ink); border: 1px solid var(--ps-v-line); }
.ps-chip.c2 { border-style: dashed; border-color: color-mix(in srgb, var(--ps-v) 55%, transparent); }
.ps-chip.hot { animation: ps-hot 1.1s var(--ease); }
@keyframes ps-hot { 0%, 30% { background-color: var(--ps-v); color: #fff; border-color: var(--ps-v); } }

/* стол и три листа веером: средний сверху, крайние чуть повёрнуты от него */
.ps-desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; padding: 18px 30px 16px; border-radius: 16px;
  background: linear-gradient(180deg, #f3f0f8, #ebe7f2); border: 1px solid #e3deec; }
.ps-slot { position: relative; min-width: 0; z-index: 1; }
.ps-slot:nth-child(1) { transform: translateX(16px) rotate(-2deg); transform-origin: 50% 100%; }
.ps-slot:nth-child(2) { transform: translateY(-5px); z-index: 2; }
.ps-slot:nth-child(3) { transform: translateX(-16px) rotate(2deg); transform-origin: 50% 100%; }
.ps-sheet { position: relative; container-type: inline-size; aspect-ratio: 210 / 297; background: #fff; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(64, 48, 96, .08), 0 1px 3px rgba(64, 48, 96, .08), 0 18px 30px -16px rgba(64, 48, 96, .4); }
.ps-pg { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 4.35cqw 5.43cqw 3.62cqw; }

/* бланк компании */
.ps-lh { display: flex; align-items: center; gap: 2.54cqw; padding-bottom: 2.17cqw; border-bottom: 1.5px solid var(--ps-co); }
.ps-logo { width: 6.16cqw; height: 6.16cqw; flex: none; }
.ps-logo rect { fill: var(--ps-co); }
.ps-logo path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.ps-lh b { font-size: 4.17cqw; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #1d3644; white-space: nowrap; }
.ps-lh span { margin-left: auto; font-size: 4.17cqw; color: #82909a; white-space: nowrap; }
.ps-t { margin: 3.26cqw 0 2.54cqw; text-align: center; font: 700 5.07cqw/1.2 var(--ps-serif); letter-spacing: .03em; text-transform: uppercase; color: #141218; text-wrap: balance; }

/* поле: подпись и метка источника, ниже значение на строке бланка */
.ps-fs { display: flex; flex-direction: column; gap: 2.17cqw; }
.ps-f { position: relative; }
.ps-fl { display: flex; align-items: center; justify-content: space-between; gap: 2.9cqw; margin-bottom: .72cqw; }
.ps-fl span { font-size: 4.53cqw; color: #8b8597; line-height: 1.2; }
.ps-tag { flex: none; font-style: normal; font-size: 4.17cqw; font-weight: 700; line-height: 1; padding: 1.09cqw 2.54cqw 1.45cqw; border-radius: 2.17cqw;
  background: var(--sc); color: #fff; white-space: nowrap; }
.ps-fv { position: relative; min-height: 7.97cqw; border-bottom: 1.5px dotted #c9c3d4; }
.ps-val { display: block; margin: 0 -1.81cqw -1.5px; padding: .36cqw 1.81cqw 0; font: 5.07cqw/1.4 var(--ps-serif); color: #16141b; background: var(--sc-soft);
  border-bottom: 2px solid var(--sc); border-radius: 1.45cqw 1.45cqw 0 0; }
.ps-sub { margin-top: 1.09cqw; font: 4.53cqw/1.3 var(--ps-serif); color: #5f5a6b; }
.ps-f.wait .ps-fv { border-bottom: 2px dashed var(--warn); }
.ps-f.wait .ps-fv::after { content: "спросил в чате"; position: absolute; right: 0; bottom: 1.45cqw; font-size: 4.35cqw; font-weight: 650; color: var(--warn-ink);
  animation: ps-blink 1.1s ease-in-out infinite; }
@keyframes ps-blink { 50% { opacity: .35; } }

/* сумма: цифрами и прописью */
.ps-fv-big { min-height: 10.87cqw; }
.ps-big { display: flex; align-items: baseline; justify-content: space-between; gap: 2.9cqw; margin: 0 -1.81cqw -1.5px; padding: .36cqw 1.81cqw .72cqw;
  background: var(--sc-soft); border-bottom: 2px solid var(--sc); border-radius: 1.45cqw 1.45cqw 0 0; }
.ps-big > span { font: 700 7.61cqw/1.2 var(--ps-serif); color: #16141b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-big small { font-size: 4.35cqw; color: #6d6779; white-space: nowrap; }
.ps-words { margin-top: 1.45cqw; font: italic 4.53cqw/1.3 var(--ps-serif); color: #5f5a6b; }

/* подписи и печать */
.ps-sign { margin-top: auto; padding-top: 3.62cqw; display: flex; justify-content: space-between; gap: 3.62cqw; font-size: 4.17cqw; color: #77717f; }
.ps-sign span { display: inline-flex; align-items: baseline; gap: 1.45cqw; white-space: nowrap; }
.ps-sign i { width: 9.42cqw; border-bottom: 1px solid #a49eae; transform: translateY(-.72cqw); }
.ps-stamp { position: absolute; right: 3.62cqw; bottom: 1.81cqw; --rot: -8deg; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 1.81cqw 4.35cqw 2.17cqw; border: 2.5px solid var(--ps-stamp); border-radius: 2.9cqw; color: var(--ps-stamp); background: rgba(255, 255, 255, .9);
  text-transform: uppercase; pointer-events: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ps-stamp) 20%, transparent); }
.ps-stamp b { font-size: 5.07cqw; font-weight: 850; letter-spacing: .08em; line-height: 1.1; }
.ps-stamp span { font-size: 3.8cqw; font-weight: 700; letter-spacing: .05em; }

/* переписка: подсветка понятого и карточка файлов */
.w-tr mark, .w-msg.in .w-b mark { background: var(--ps-v-soft); color: var(--ps-v-ink); border-radius: 3px; padding: 0 2px;
  box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--ps-v) 55%, transparent); }
.ps-cc { min-width: 250px; display: flex; flex-direction: column; }
.ps-cc-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 750; color: var(--ps-stamp); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.ps-cc-h svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ps-cc-r { display: flex; align-items: center; gap: 9px; padding: 3px 0; border-top: 1px solid var(--line-2); }
.ps-cc-h + .ps-cc-r { border-top: 0; }
.ps-cc-x { position: relative; flex: none; width: 22px; height: 27px; border-radius: 4px; background: var(--fc); color: #fff; font-size: 6.5px; font-weight: 800;
  letter-spacing: .02em; display: grid; place-items: end center; padding-bottom: 3px; }
.ps-cc-x::after { content: ""; position: absolute; top: 0; right: 0; border: 4px solid transparent; border-top-color: #fff; border-right-color: #fff; opacity: .85; }
.ps-cc-r b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.ps-cc-r small { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ps-cc-f { margin-top: 3px; padding-top: 7px; border-top: 1px solid var(--line-2); font-size: 14.5px; line-height: 1.4; color: var(--ink); }

/* превью: результат по центру в ширину сцены на 1440; в итоговом виде шаги сразу зелёные, без перехода */
.w-og .ps { max-width: 940px; margin: 0 auto; }
.w-final .w-st, .w-final .w-st i { transition: none !important; animation: none !important; }

/* ноутбук 1280–1366: листы те же, чуть меньше */
@container (max-width: 860px) {
  .ps-desk { gap: 10px; padding: 14px 16px; }
  .ps-slot:nth-child(1) { transform: translateX(10px) rotate(-1.5deg); }
  .ps-slot:nth-child(3) { transform: translateX(-10px) rotate(1.5deg); }
}
/* телефон: листы друг под другом */
@container (max-width: 700px) {
  .ps-desk { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px; }
  .ps-slot:nth-child(n) { transform: none; }
}